layui 学习笔记(三) 用ltable 动态创建一条<th>

添加行和删除行 -- 用layui 的可编辑table 写的 

该功能只在前台做操作 不走后台 最主要是为了获取数组做后续操作。

html:

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

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

js:// 画表格

table.render({
        elem: '#test'
        ,data:arr// 这里是一个数组 当点击添加和删除的时候对这个数组中的数据进行操作就可以了
        // ,page: true 不分页

　　　　 ,limit:Number.MAX_VALUE// 数据表格默认全部显示
        ,height:'360'
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,cols: [[
            {field: 'id', hide: true, title: '主键'/*,
                template:function(data){
                    data.LAY_TABLE_INDEX;
                }*/
            }
            ,{field:'x', title: 'x轴',edit: 'text'}//edit:'text' 可输入
            ,{field:'y',  title: 'y轴', sort: true,edit: 'text'}
            ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
        ]]
        ,done:function(res){
            var hdata =res.data;
        }});

 

删除:当然是写一个监听事件

table.on('tool(test)', function(obj){
        var data = obj.data;
        var id = obj.data.id;
        if(obj.event === 'del'){
            layer.confirm('真的删除行么', function(index){
                obj.del();
                arr.splice(id,1);
                layer.close(index);
            });
        }
    });

添加行:// 这里是点击按钮操作

var arr = new Array();
var num=0;// 这里是我的id
$('#btnAddRow').click(function () {
        num++;
        arr.push({'id':num,'x':'','y':''});
        table.render({
            elem: '#test'
            ,data:arr
　　　　　　　 ,limit:Number.MAX_VALUE// 数据表格默认全部显示 
            //,page: true 不分页
            ,height:'360'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field: 'id', hide: true, title: '主键'}
                ,{field:'x', title: 'x轴',edit: 'text'}
                ,{field:'y',  title: 'y轴', sort: true,edit: 'text'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
            ]]
            ,done:function(res){
            }
        });
    });

 

###########################

如果需要下拉选 还比较懒 那样的话可以直接拿来用的也有 ：

https://maplemei.gitee.io/xm-select/#/senior/update

 

@