Layui表格手动添加一行和删除一行

css代码:

<table class="layui-hide" id="demo" lay-filter="demo"></table>

js代码:
首先要对表格渲染下

var addata = [{//可以赋值
             "LocationNumber": ""
            , "InventoryQuantity": ""
        }]
layui.use('table', function () {
                    var table = layui.table;
                    //展示已知数据
                    tables = table.render({
                        elem: '#demo'
                        ,width:500
                      , cols: [[ //标题栏
                          { type: 'checkbox', fixed: 'left', hide: true }
                        , { fixed: 'left', toolbar: '#barDemoKCCF', title: '操作', width: 180, align: 'center' }
                        , { field: 'LocationNumber', title: '仓位编码', width: 158, templet: '#checkboxTpl' }
                        , { field: 'InventoryQuantity', title: '拆分数量', edit: 'text', width: 158 }
                         
                      ]]
//这里就是一开始渲染就添加一个空的一行数据,或者添加一下数据也可以 
                      , data: addata
                      , even: true
                    });
                    //监听添加一行和删除一行操作
                    table.on('tool(demo)', function (obj) {
                        //var data = obj.data;
                        if (obj.event === 'edit') {
                            var Data = table.cache["demo"];
                            var datas = {
                                "left":""
                                ,"id": ""
                                ,"username": ""
                            }
                            Data.push(datas);
                            tables.reload({
                                data: Data
                            });
                        } else if (obj.event === 'del') {
                            var Data = table.cache["demo"];
                            if (obj.tr.data('index') != 0) {
                                Data.splice(obj.tr.data('index'), 1)//根据索引删除当前行
                                tables.reload({
                                    data: Data
                                });
                            }
                        }
                    });
                    //这是监听可编辑的
                    table.on('edit(demo)', function (obj) {
                        var Data = table.cache["demo"];
                        // Data [0].emails = Data [0].email * Data [0].username;//测试计算可行 
                        tables.reload({
                            data: Data
                        });
                    });
                });

猜你喜欢

转载自blog.csdn.net/weixin_42047392/article/details/89575621