layui动态表格的增删改查

表格

查询按钮

 <button class="layui-btn" lay-submit lay-filter="lay-index-search">
        <i class="layui-icon layui-icon-search"></i>
 </button>

表格主体

<table id="lay-index-list" lay-filter="lay-index-list-filter"></table>

工具栏（表格外）

<script type="text/html" id="toolbarindex">
    <div style="padding-bottom: 10px;">
        <button class="layui-btn layuiadmin-btn-list" data-type="addindex">新增</button>
        <button class="layui-btn layuiadmin-btn-list" data-type="batchdelindex">删除</button>
    </div>
</script>

工具栏（表格内）

<script type="text/html" id="table-tool-list">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
            class="layui-icon layui-icon-edit"></i>修改</a>
</script>

查询

监听查询按钮

//监听搜索
        form.on('submit(lay-index-search)', function (data) {
            var field = data.field;

            //执行重载
            table.reload('lay-index-list', {
                where: field
            });
        });

表格部分

//表格初始化
        table.render({
            elem: '#lay-index-list'//绑定表格id
            , url: '/abcefg' //表格接口
            , method: 'post' //请求方式
            , toolbar: '#toolbarindex' //自定义工具栏
            , defaultToolbar: []
            , title: '数据表'
            , totalRow: false
            , where: { //查询参数
                "name1": '12',
                "name2": '34'
            }
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'kpiName', title: '指标名称', width: 260}
                , {
                    field: 'kpiCode', title: '指标编码', width: 180,  templet: function (res) {
                        return '<em>' + res.kpiCode + '</em>'
                    }
                }
                , {field: 'kpiDevType', title: '设备类型', width: 100}
                , {field: 'kpiUnits', title: '指标单位', width: 100}
                , {
                    field: 'kpiLevel', title: '指标级别', width: 100, templet: function (res) {
                        if (res.kpiLevel === "2") {
                            return '网元'} else if (res.kpiLevel === "3") {
                            return '板卡'} else if (res.kpiLevel === "4") {
                            return '端口'}}}
                , {field: 'kpiDesc', title: '描述', width: 150}
                , {fixed: 'right', title: '操作', toolbar: '#table-tool-list', width: 150}  //绑定操作
            ]],
            done: function () {
                $("[data-field='id']").css('display','none');
                
            }
            , page: true
            , limit: 10
            , limits: [10, 20, 50]
        });

表格加载完成隐藏某列

  done: function () {
    $("[data-field='id']").css('display','none');
         }       

layui2.4.5 支持在列上加hidden

{field: 'kpiUnits', title: '指标单位',hidden:true}

修改

table.on('tool(lay-index-list-filter)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            var layEvent = obj.event;
            if (layEvent === 'edit') {
                layer.open({
                    type: 1,
                    title: '修改指标',
                    area: ['100%','100%'],
                    btn: ['确认', '取消'],
                    btnAlign: 'c',   // 按钮居中
                    content: $('#edit').html(),
                    yes: function (index, layero) {
                        var id = $("#id").val();
                        var kpiName = $("#kpiNameEdit").val();
                        var kpiCode = $("#kpiCodeEdit").val();
                        var devType = $("#devTypeEdit").val();
                        var kpiUnits = $("#kpiUnitsEdit").val();
                        var kpiLevel = $("#kpiLevelEdit").val();
                        var kpiDesc = $("#kpiDescEdit").val();

                        $.post('/modifykpi',
                            {
                                "id":id,
                                "kpiName":kpiName,
                                "kpiCode":kpiCode,
                                "devType":devType,
                                "kpiUnits":kpiUnits,
                                "kpiLevel":kpiLevel,
                                "kpiDesc":kpiDesc
                            }, function (data) {
                                if (data.code === 200) {
                                    layer.msg('更新成功', {icon: 1});
                                    // 同步更新表格数据
                                    obj.update({
                                        kpiName:kpiName,
                                        kpiCode:kpiCode,
                                        devType:devType,
                                        kpiUnits:kpiUnits,
                                        kpiLevel:kpiLevel,
                                        kpiDesc:kpiDesc
                                    })
                                } else {
                                    layer.msg('更新失败', {icon: 5})
                                }
                            });
                        layer.close(index);//关闭弹出框

                    }
                });
                console.log('初始化表单之前'+JSON.stringify(data));
                //初始化修改表单 "name":value
                form.val("form-kpi-edit", {
                    "id": data.id
                    , "kpiNameEdit": data.kpiName
                    , "kpiCodeEdit": data.kpiCode
                    , "devTypeEdit": data.kpiDevType
                    , "kpiUnitsEdit": data.kpiUnits
                    , "kpiLevelEdit": data.kpiLevel
                    , "kpiDescEdit": data.kpiDesc
                });
                form.render(null, 'form-kpi-edit')
            }
        });

批量删除

 var  active = {
            batchdelindex: function () {
                var checkStatus = table.checkStatus('lay-index-list')
                    , checkData = checkStatus.data; //得到选中的数据

                if (checkData.length === 0) {
                    return layer.msg('请选择数据');
                } else {
                    var ids = [];
                    $.each(checkData, function (i, v) {
                        ids.push(v.id);
                    });
                    console.log(ids);
                    layer.confirm('确定删除吗？', function (index) {

                        //执行 Ajax 后重载
                        $.post('/batchdelkpi', {"ids": JSON.stringify(ids)}, function (data) {
                            if (data.code === 200) {
                                layer.close(index);
                                table.reload('lay-index-list');
                                layer.msg('已删除', {icon: 1});
                            } else {
                                layer.close(index);
                                layer.msg(data.msg, {icon: 5});
                            }
                        });
                    },function(index) {
                        layer.close(index);
                    });
                }
            },
            edit:function{.....}
        };

个人博客 > 欢迎来访