tnblog
首页

点击input弹出table数据表格

66人阅读 2019/3/19 17:37 评论:1 收藏
分类: .NET

                 

先看下效果图

   

    插件下载地址  https://gitee.com/lolicode/layui_component_tableselect

       因为是以layer基础开发所以要引用layer 相关js

    

    实例化表格


    参数:elem:绑定input的ID,searchKey:搜索的关键字,checkedKey:选中字段(如果前台没有会影响选中一般为ID),data:为获取到的一行数据

                数据格式为数组:

后端接收相关参数进行(EF)分页page:第几页,limit:每页显示条数:

做完这一步你会发现我们样式跟展示不一样(不知道是不是大家都这样):

        然后找遍layer相关文档发现可以设置表头 style :margin-top但是没用,然后只能自己想办法写样式了,于是在浏览器进入开发者模式

        这样设置好了后,发现可行,$("tbody .layui-icon").attr("style", "margin-top: 15px");实例化添加样式,发现没鸟用!

    经过研究发现,表格是在点击input弹出于是只要添加点击事件就可以了,但是这样有个弊端,因为表格是一开始实例化这样添加样式没什么用,想到js延时执行方法setTimeout和setInterval,

     setTimeout当点击查询时样式会变回去,所以采用setInterval,


        然后大功告成啦!

评价

{{item.title}}

{{item.content}}
没有个性,不需要签名
博主搜索
文章类别
最新文章
最新评价
{{item.ArticleTitle}}
{{item.BlogName}} : {{item.Content}}