layUI创建固定列动态传入列名

最新推荐文章于 2022-04-15 09:38:15 发布

散落的流沙

最新推荐文章于 2022-04-15 09:38:15 发布

阅读量2.3k

点赞数

分类专栏： # JavaScript&jQuery 文章标签：固定列 layUI固定列动态表头

本文链接：https://blog.csdn.net/threelifeadv/article/details/90302199

版权

JavaScript&jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这两天在做公司的考勤数据系统，要求在考勤管理中固定部分列，剩余列可以动态生成并拖动展示，layUI给我们提供的案例无动态生成，百度上找到的始终会生成二级表头，琢磨了一天终于有了方案，特此记下。

页面主体：

<body>
    <table class="layui-hide" id="attence"></table>
</body>

方法：

<script src="../layui/layui.js" charset="utf-8"></script>
<script>
    var col = [
	    {field:'id', title: '工号', width: '8%', sort: true, align:'center',fixed: 'left'}
        ,{field:'username', title: '姓名', width: '12%', fixed: 'left',align:'center'} 
        ,{field:'department', title: '部门', width: '14%', fixed: 'left',align:'center'}
        ,{field:'worktime', title: '日平均工作时长', width: '10%', fixed: 'left',align:'center'}
];
    for(var j =0;j<days.length;j++) {
    	var title = j+1;
    	col.push({field: 'date', title: title, width: '8%', align:'center'});
    }

    layui.use('table', function(){
      var table = layui.table;
  
      table.render({
        elem: '#attence-table'
        ,url:'/getAllAttence.do'
        ,width: 1280
        ,height: 332
        /* ,cellMinWidth: 80 */
        ,cols: [col]
        ,page: true
      });
    });
</script>

此处是将固定已知列放在一个数组中，然后将动态列push到该数组中，再将该数组放在cols里，避免了二级表头的出现。

散落的流沙

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
layUI创建固定列动态传入列名

这两天在做公司的考勤数据系统，要求在考勤管理中固定部分列，剩余列可以动态生成并拖动展示，layUI给我们提供的案例无动态生成，百度上找到的始终会生成二级表头，琢磨了一天终于有了方案，特此记下。页面主体：<body> <table class="layui-hide" id="attence"></table></body>方法...
复制链接

扫一扫