layui如何在表格重载时更改表头

您所在的位置:网站首页 layui表格修改后刷新 layui如何在表格重载时更改表头

layui如何在表格重载时更改表头

2024-05-24 23:31| 来源: 网络整理| 查看: 265

最近有个项目使用了layui框架,在实际的使用中遇到了不少的问题,今天说下其中的一个比较坑的问题:table重载后展示动态表头

需求:使用table展示考勤信息,并能够根据时间筛选 形式如下图,表头的日期要求根据月份动态展示

问题:在时间筛选的时候遇到了难题,表格重载后,表头没有按照重载方法传入的cols参数展示,而是还是展示原先的表头

原因:经过一番排查后发现原因,layui中 table.reload(ID, options) 在接收options中的参数中,如果参数是数组形式,那并不会完全替换历史参数,而是覆盖到对应长度。如果之前传入参数是[1,2,3,4],重载传入参数是[a,b.c],那后台获取到的参数是[a,b,c,4],这就是为什么我在筛选日期为2月后,表头还是展示到30天(新传入的表头29项,和之前的30项合并后,任然是30项)这个问题是真的坑啊

解决:这个问题解决起来并不复杂,而是复杂在了发现问题的原因,实际解决只需要一行关键代码就好,在table的render方法的回调函数中,将cols字段初始化就可以了:  this.cols = [ ];

逻辑代码:

//表格渲染 table.render({ elem:"#pdata", cols:[cols], url:"index", toolbar:'2019-09', defaultToolbar:[], data:[], done:function (res,curr,count) { this.cols = []; //(关键代码)将cols初始化,否则表格重载时无法正确重新渲染表头 } }) //点击筛选,重载表格 $('#searchForm').on('click',function () { var year = $('#year').val(); var month = $('#month').val(); var countDay = new Date(year,month,0).getDate(); //获取筛选后的月份是多少天 //根据筛选的日期重新生成表头 var new_cols = [{field:'user_name',title:'姓名',align:'center',width:100,fixed:'left'}]; for (let j=1;j


【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3