layui的数据表格因数据长度的原因与固定列对不上的解决办法

table初始化的done方法中配置
done: function (res, curr, count){

    //------------------------------------(只是标题,所以不需要循环) --------------------------------------------
    //编号列名与操作列的高度 ------> 列名的高度 
    $(".layui-table-fixed-l .layui-table-header table").height($(".layui-table-header tr").eq(0).height());
    $(".layui-table-fixed-r .layui-table-header table").height($(".layui-table-header tr").eq(0).height());
        
        
    //  **********************************         每行的(因此需要循环) ***************************************************  
      //编号列与操作列的高度 ------> 列名的高度 
     //如果有合并单元格,必须在合并单元格之后,否则有些单元格高度还是不一致
    $(".layui-table-main tr").each(function (index, val) { //解决字段值列与 编号列、操作列高度不一致的问题
       // $($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());//如果只有1边有固定列,这行就搞定
       //如果有左又有右固定列,那么以下两行都需要
       $($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
       $($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
    });
        
        
        

}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
layui是一款基于jQuery的前端UI框架,其中的数据表格组件可以快速实现数据的展示和操作。而动态扩展是指在数据表格中动态增加或删除的操作。 在layui数据表格中,可以通过设置cols(参数)来定义表格数和属性。例如: ``` var table = layui.table; table.render({ elem: '#demo', url: '/data', cols: [[ {field: 'id', title: 'ID', width: 80}, {field: 'username', title: '用户名', width: 120}, {field: 'email', title: '邮箱', minWidth: 200}, {field: 'sex', title: '性别', width: 80}, {field: 'city', title: '城市', width: 100}, // 其他字段... {field: '操作', title: '操作', toolbar: '#barDemo', width: 150} // 操作 ]] }); ``` 在以上代码中,通过设置cols参数来定义表格属性,每个使用一个对象来表示,其中field表示字段名,title表示标题,width表示宽度。除了基本的属性外,还可以使用toolbar属性来定义某的操作按钮,以实现扩展的功能。 如果要动态增加或删除,可以在渲染表格之后,通过遍历并修改cols参数中的数组,实现的增加或删除。例如: ``` var newCols = table.config.cols; // 获取当前表格参数 // 动态增加一个 newCols[0].push({field: 'age', title: '年龄', width: 80}); // 动态删除一个,可以通过遍历找到需要删除的 for(var i=0; i<newCols[0].length; i++){ if(newCols[0][i].field === 'email'){ newCols[0].splice(i, 1); break; } } // 重新渲染表格 table.render({ elem: '#demo', url: '/data', cols: newCols }); ``` 通过以上代码,我们可以实现动态扩展的功能。当需要增加或删除时,可以修改cols参数,并重新渲染表格,即可实现动态扩展的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

往事不堪回首..

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值