layui数据表格动态cols(字段)动态变化

在处理按日期时间段查询的场景中,当需要根据后台返回的日期数据动态调整layui数据表格的cols(字段)时,可以将表格渲染封装到一个函数内。通过监听搜索提交事件,使用动态传递的cols_arr数组作为字段输入。值得注意的是,直接重载表格的cols属性可能无法实现变化,解决方法是在重载前调用这个自定义的渲染函数,确保cols能够正确更新。
摘要由CSDN通过智能技术生成

如搜索查询时,常会遇到按日期时间段查询,并显示查询的每个日期的数据,后台拼装数据此处不讨论。

把表格渲染封装在函数里面,cols_arr是传入的字段数组

function tableRender(cols_arr){
    table.render({
        elem: '#demo'
        , url: 请求地址 //数据接口
        , method: 'post'
        , page: true //开启分页
        , cols: cols_arr
        , id: 'demo'
        , limit: 10
        , limits: [10, 20, 50, 100, 200, 500]
        , done: function (res) {}
    });
}

监听搜索提交

// 搜索
form.on('submit(demo1)', function (obj) {
    var start_date = obj.field.start_date;
    var end_date = obj.field.end_date;
    if (start_date != '' && end_date != ''){
        var all_date = getAll(start_date, end_date);
        if ( all_date.length>7){
            layer.msg('查询天数不得超过7天', {icon: 2, anim: 6});
            return false;
        
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
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参数,并重新渲染表格,即可实现动态扩展列的效果。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值