原生JS+layui项目笔记（二）【table表格数据添加、删除】

项目需求：两个表格，表格一为已映射数据列表，表格二为未映射数据列表；两个表格相加为全部数据。表格一可以删除，表格二可以选中单条或多条添加进表格一。

两个表格嵌入弹出框，使用弹出框与form表单，使用弹出框的“确定”按钮作为表格二批量导入的确认键。

<script id="wd_data_box" type="text/html">
    <div class="layui-form wd_box" lay-filter="filter_wd_data_form">
        <div class="wd_left_box">
            <h2 class="title">已映射文电</h2>
            <table id="wd_message_table" lay-filter="wd_message_table">
        </div>
        <div class="wd_left_box">
            <h2 class="title">未映射文电</h2>
            <table id="qt_message_table" lay-filter="qt_message_table">
        </div>
    </div>
</script>

css使用flex布局

.wd_box{
    width:100%;
    height:100%;
    display:flex;
    justify-content:space-between;
}
.wd_box .wd_right_box{
    width:48%;
    height:100%;
    border:1px solid #797979;
}
.wd_box h2{
    margin:10px;
    width:150px;
    height:28px;
    font-family:"Arial Negreta","Arial Normal","Arial";
    font-weight:700;
    font-style:normal;
    color:#797979;
}

table表格的单条添加、单条删除以及批量添加、批量删除都是前端操作，没有调用接口。加入真实数据后可直接用table.reload('表格id',{url:'接口地址',where:{携带数据}})进行表格重载。

// 弹出框是点击父表格“编辑”按钮触发的
table.on('tool(train_rules_table)',function(obj){
    var layEvent = obj.event;
    if(layEvent == 'check'){
        layer.open({
            type:1,
            content:wd_data_box.innerHTML,//还有laytpl模板语言、html串形式等等写法
            title:'反馈文电',
            skin:'m-pop-window',
            area:['1245px','700px'],
            offset:'auto',
            btn:['确定'],
            btnAlign:'r',
            resize:false,
            shade:[0, 'transparent'],
            anim:0,
            success: function(){
                //获取两个文电列表
                initWDmessage();
                initOtherWDmessage();
            },
            // 点击“确定按钮”
            yes: function(){
                //获取表格二复选框选中数据列表
                var wdData = table.checkStatus('other_message_table').data;
                if(wdData.length > 0){
                    // 给表格一添加数据
                    var tableData1 = layui.table.cache['wd_message_table'];
                    $.each(wdData,function(i,v){
                        tableData1.push(v)
                    });
                    table.reload('wd_message_table',{data:tableData1});
                };
                //删除表格二选中的数据
                var tableData2 = layui.table.cache['other_message_table'];
                $('.layui-table-body table tbody div.layui-form-checked').each(function(){
                    //获取复选框选中当前行索引
                    var n = $(this).parents("tbody tr").index();
                    // 删除复选框选中行，此时表格序号断层，分页器未刷新
                    $('div.layui-table-body table tbody').find("tr:eq("+n+")").remove();
                    // 在缓存数据中删除选中行后重载表格二
                    tableData2.splice(n-i,1);
                });
                table.reload('other_message_table',{data:tableData2});
            }
        })
    }
});
// 表格一
function initWDmessage(){
    statusData=[{"id":"1062","conductId":"166","fjr":"发件人","sjr":"收件人","bt":"标题","sj":"时间"},{"id":"1062","conductId":"166","fjr":"发件人","sjr":"收件人","bt":"标题","sj":"时间"},{"id":"1062","conductId":"166","fjr":"发件人","sjr":"收件人","bt":"标题","sj":"时间"},{"id":"1062","conductId":"166","fjr":"发件人","sjr":"收件人","bt":"标题","sj":"时间"}]
    table.render({
        elem:'#wd_message_table',
        id:'wd_message_table',
        width: 550,
        height: 480,
        page:true,
        limit:50,
        /*method:'get',
        url:'linkUrl',
        where:{
            'taskId':xxx,
        },*/
        data:statusData,
        // 规范返回数据格式，格式不同渲染不出来
        /*parseData:function(res){
            return {
                'code':res.code,
                'msg':res.message,
                'data':res.data
            }
        },*/
        cols:[[
            {type:'number',title:'序号',align:'center'},
            {field:'fjr',title:'发件人',align:'center'},
            {field:'sjr',title:'收件人',align:'center'},
            {field:'bt',title:'标题',align:'center'},
            {field:'sj',title:'时间',align:'center'},
            {title:'操作',align:'center',width:60,
                templet:function(d){
                    return '<button class="layui-btn layui-btn-xs" lay-event="delete">删除</button>'
                }
            },
        ]]
    });
    table.on('tool(wd_message_table)',function(obj){
        var table_data = obj.data;
        var layEvent = obj.event;
        var rowIndex = $(obj.tr).attr('data-index'); // 获取当前行索引
        if(layEvent == 'delete'){
            var tableData1 = layui.table.cache['wd_message_table'];
            obj.del(); // 删除当前行数据，但是序号断层，分页器总页数没有变化
            tableData1.splice(rowIndex,1); // 从缓存中删除选中数据
            table.reload('wd_message_table',{data:tableData1});
        }
    })
};
// 表格二
function initOtherWDmessage(){
    statusData=[{"id":"1062","conductId":"166","fjr":"发件人","sjr":"收件人","bt":"标题","sj":"时间"},{"id":"1062","conductId":"166","fjr":"发件人","sjr":"收件人","bt":"标题","sj":"时间"},{"id":"1062","conductId":"166","fjr":"发件人","sjr":"收件人","bt":"标题","sj":"时间"},{"id":"1062","conductId":"166","fjr":"发件人","sjr":"收件人","bt":"标题","sj":"时间"}]
    table.render({
        elem:'#other_message_table',
        id:'other_message_table',
        width: 550,
        height: 480,
        page:true,
        limit:50,
        /*method:'get',
        url:'linkUrl',
        where:{
            'taskId':xxx,
        },*/
        data:statusData,
        // 规范返回数据格式，格式不同渲染不出来
        /*parseData:function(res){
            return {
                'code':res.code,
                'msg':res.message,
                'data':res.data
            }
        },*/
        cols:[[
            {type:'number',title:'序号',align:'center'},
            {field:'fjr',title:'发件人',align:'center'},
            {field:'sjr',title:'收件人',align:'center'},
            {field:'bt',title:'标题',align:'center'},
            {field:'sj',title:'时间',align:'center'},
            {title:'操作',align:'center',width:60,
                templet:function(d){
                    return '<button class="layui-btn layui-btn-xs" lay-event="add">添加</button>'
                }
            },
        ]]
    });
    table.on('tool(other_message_table)',function(obj){
        var table_data = obj.data;
        var layEvent = obj.event;
        var rowIndex = $(obj.tr).attr('data-index'); // 获取当前行索引
        if(layEvent == 'add'){
            // 将选中的单条数据从列表中删除，重载表格二
            var tableData2 = layui.table.cache['other_message_table'];
            obj.del(); // 删除当前行数据，但是序号断层，分页器总页数没有变化
            tableData2.splice(rowIndex,1); // 从缓存中删除选中数据
            table.reload('other_message_table',{data:tableData2});
            // 将选中数据添加至表格一，重载表格一
            var tableData1 = layui.table.cache['wd_message_table'];
            tableData1.push(table_data);
            table.reload('wd_message_table',{data:tableData1})
        }
    })
};