Layui table 数据表格

GitHub
Gitee
 

<div class="userTable" id="userTable">
    <table id="test" lay-filter="demo"></table>
</div>

1、表格单击事件、复选框选择取消事件

layui.use('table', function () {
    var table = layui.table;
    table.on('row(demo)', function(obj){
        var data = obj.data;
        //复选框选择、取消
        var flag = !obj.tr.find(':checkbox:first').attr('checked');
        obj.tr.find(':checkbox').attr('checked', flag);
        if (flag) {
            obj.tr.find('.layui-form-checkbox').addClass('layui-form-checked');
        } else {
            obj.tr.find('.layui-form-checkbox').removeClass('layui-form-checked');
        }

        layer.alert(JSON.stringify(data), {
            title: '当前行数据：'
        });
    })
})
或
layui.use('table', function () {
    var table = layui.table;
    table.on('tool(demo)', function (obj) {
        var data = obj.data;
        if (obj.event === 'selrow') {
            alert(obj.event);
        }
    })
})
或【同一组的同时选中】
layui.use('table', function () {
    var table = layui.table;
    table.render({
        id: 'user-list',
    });
    table.on('tool(demo)', function (obj) {
        var data = obj.data;
        if (obj.event === 'selected') {
            let tabData = table.cache['user-list'];
            let trIndexs = [];
            let tempData = tabData.filter((item, index) => {
                if (item.p_id == obj.data.p_id) {
                    trIndexs.push(index);
                }
            });
            if (trIndexs.length > 0) {
                //判断是否选中
                let firstIndex = $(obj.tr).attr('data-index');
                let checkCell = $(obj.tr).find('td:first .layui-form-checkbox')
                if (checkCell) {
                    let firstCbxState = checkCell.hasClass('layui-form-checked');
                    if (firstCbxState) {
                        if (firstIndex != trIndexs[0]) {
                            checkCell.click();
                            return
                        }
                    }
                    trIndexs.forEach((item) => {
                        let orderTableTr = $('#userTable .layui-table tr[data-index=' + item + ']');
                        let checkCell = orderTableTr.find('td:first .layui-form-checkbox');
                        let curCbxState = checkCell.hasClass('layui-form-checked');
                        if (firstCbxState) {
                            if (curCbxState) {
                                checkCell.click();
                            }
                        } else {
                            if (!curCbxState) {
                                checkCell.click();
                            }
                        }
                    });
                }
            }
        }
    })
})

2、表格双击事件

layui.use('table', function () {
    var table = layui.table;
    table.on('rowDouble(demo)', function(obj){
        var data = obj.data;
        layer.alert(JSON.stringify(data), {
            title: '当前行数据：'
        });
    })
})

3、监听单元格编辑

layui.use('table', function () {
    var table = layui.table;
    table.on('edit(demo)', function (obj) {
        var data = obj.data;
        var value = obj.value //得到修改后的值
        ,data = obj.data //得到所在行所有键值
        ,field = obj.field; //得到字段
        layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value));
    })
})

4、监听性别操作（单选按钮）

layui.use('table', function () {
    var table = layui.table
    ,form = layui.form;
    form.on('switch(demo)', function(obj){
        layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
    })
})

5、监听锁定操作（复选框）

layui.use('table', function () {
    var table = layui.table
    ,form = layui.form;
     form.on('checkbox(demo)', function(obj){
        layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
    })
})

*
*
*
*
*
*