前端框架之前接触过不少，目前在用Layui比较顺手；不过也遇到不少雷和坑。这里就分享一下那些雷和坑。。首先说一下表格中有时候ID或NAME是无法取值，只能通过lay-filter指定一个name，然后获得。例如：

复制
<select id="Device_Type" name="Device_Type" lay-filter='Device_Type'>
</select>
<script>
 var postData = data.field;
 var Device_Type =postData.Device_Type;//这样就获得select的值
</script>

这个只是小菜一碟，我们还是直接上点主菜吧。

复制
    layui.use(['jquery', 'form', 'table', 'commonTable', 'common'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table, commonTable = layui.commonTable
        common = layui.common;
        var ids = new Array();
        var table_data = new Array();
        toolbarDemo.innerHTML = "<div>当前已经选：<input type='text' id='Cdata' style='width:500px;border:0;background-color:rgba(0,0,0,0);'/></div>";
        commonTable.rendertable({
            elem: '#currentTableId',
            id: 'currentTableId',
            url: '/QAManage/QAWX/GetGridJson',
            defaultToolbar: [],
            skin: 'line',
            limit: 20,
            search: false,
            cols: [[          
                { checkbox: true,width: 60, fixed: true },
                { field: 'Name', title: '姓名', width: 100, sort: true, filter: true },
                { field: 'Telnet', title: '电话', width: 160, sort: true, filter: true },
                { field: 'Memo', title: '备注', width: 180, sort: true, filter: true },
                { field: 'TypeName', title: '角色', width: 80, sort: true, filter: true
                    ,templet: function (d) {
                        switch (d.TypeName) {                          
                            case "B":
                                return ("生产")
                            case "C":
                                return ("售后")
                            case "D":
                                return ("品管")
                            default:
                                return ("全能")
                        }                     
                    }                
                },
                {
                    field: 'DataLevel', title: '当前状态', width: 80,
                    templet: function (d) {
                        return top.clients.dataItems["DataLevel"][d.DataLevel] == null ? "" : top.clients.dataItems["DataLevel"][d.DataLevel];
                    }
                },
                { field: 'F_CreatorTime', title: '注册时间', width: 120, sort: true, filter: { type: 'date[yyyy/MM/dd HH:mm:ss]' } },         
                
            ]],
            done: function (res, curr, count) {               
                $('th[data-field=' + 0 + '] input[type="checkbox"]').prop('disabled',true);
                for (var i = 0; i < res.data.length; i++) {
                    for (var j = 0; j < ids.length; j++) {                       
                        if (res.data[i].Id == ids[j].Id) {                          
                            res.data[i]["LAY_CHECKED"] = 'true';                          
                            var index = res.data[i]['LAY_TABLE_INDEX'];
                            $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                            $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                        }
                    }
                }
                
                var checkStatus = table.checkStatus('my-table');
                if (checkStatus.isAll) {
                    $('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
                    $('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
                }
                //得到所有数据
                console.log(res);
                //得到当前页码
                console.log(curr);
                //得到数据总量
                console.log(count);
            }
 
        });
        table.on('checkbox(currentTableFilter)', function (obj) {
            var Idata = obj.data;
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据           
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
            //---------------------------------------
            if (obj.checked == true) {
                if (obj.type == 'one') {           
                    ids.push(obj.data);
                } else {
                    for (var i = 0; i < table_data.length; i++) {                 
                        ids.push(table_data[i]);
                    }
                }
            } else {
                if (obj.type == 'one') {
                    for (var i = 0; i < ids.length; i++) {
                        if (ids[i].Id == obj.data.Id) {
                            ids.remove(i);
                        }
                    }
                } else {
                    for (var i = 0; i < ids.length; i++) {
                        for (var j = 0; j < table_data.length; j++) {
                            if (ids[i].Id == table_data[j].Id) {
                                ids.remove(i);
                            }
                        }
                    }
                }
            }
            var Name = "";
            ids.forEach(function (item, index, arr) {
                Name += item.Name+"、"
            });
            $("#Cdata").val(Name);
            //---------------------------------------
        });       
        form.on('submit(CloseBtn)', function (data) {
            var data = table.checkStatus('currentTableId').data;
            if (data.length == 0) {
                common.modalMsg("未选中数据", "warning");
                return;
            };         
            console.log(data)
            var currentWindow = common.parentWindow();//定义父窗口         
            //currentWindow.Auto_STAFF(JSON.stringify(data));
            currentWindow.Auto_STAFF(JSON.stringify(ids));
            
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);// 关闭子窗口
        });
        
        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //执行搜索重载
            commonTable.reloadtable({
                elem: 'currentTableId',
                curr: 1,
                where: { keyword: data.field.txt_keyword }
            });
            return false;
        });
        wcLoading.close();
 
    });
 
//------------------------------
    Array.prototype.remove = function (dx) {
        if (isNaN(dx) || dx > this.length) { return false; }
        for (var i = 0, n = 0; i < this.length; i++) {
            if (this[i] != this[dx]) {
                this[n++] = this[i]
            }
        }
        this.length -= 1
    }

这里就是一个Layui TABLE进行数据展示的代码片段，这里涉及到几个点：1、禁止全选。2、翻页记录。3、父子页数据传输。4、表格格式。这些你看明白没。。还有一个隐藏彩蛋。这里就不公开了。。