layui 关于table详解（注释已在代码中详细介绍）

1.渲染table表格数据详解

//渲染表格，classTable可以理解为表格里面所有的数据
        var classTable = table.render({
            // 提前准备好的table表格
            elem: "#LAY-educationalTraining-gradeManagement-gradeInformation-table",
            // 表格里面的数据来源,返回的是分页数据Paging(Ipage ipage); layui.setter.apiHost
            url: layui.setter.apiHost + '/jwAllBjBaseinfo/pageList',
            // toolbar指的是表格上方的操作按钮，这个id就是提前准备好的button，如果这个按钮需要添加权限，可以把这个按钮放到<script>
            // {{# if (layui.myUtils.hasPermissons('jw:bj:baseinfo:add')) { }}
            // {{#}}}
            toolbar: "#LAY-educationalTraining-gradeManagement-gradeInformation-toolbar",
            // table表的列 fileld：数据库字段名  title:表格里面显示的列名 align:表格里面列名的位置 ‘left’，‘right’，‘center’
            // return "<div>" + planType[dicSelect.keyPrefix + data.planType] + "</div>" 字典表


            cols: [[{field: "name", title: "班级名称", align: "center"}
                , {
                    field: "trainTime", width: 200, title: "培训周期", align: "center", templet: function (data) {
                        return "<div>" + data.beginDate + " ~ " + data.endDate + "</div>";
                    }
                }
                , {
                    field: "planType", width: 100, title: "计划类型", align: "center", templet: function (data) {
                        return "<div>" + planType[dicSelect.keyPrefix + data.planType] + "</div>";
                    }
                }
                , {field: "headTeacher", width: 120, title: "班主任", align: "center"}
                , {
                    field: "approveStatus", width: 110, title: "审批状态", align: "center", templet: function (data) {
                        return "<div>" + approveStatus[dicSelect.keyPrefix + data.approveStatus] + "</div>";
                    }
                }
                , {field: "requester", width: 120, title: "委托单位", align: "center"}
                , {
                    title: "操作",
                    width: 345,
                    align: "center",
                    <!--toolbar 表格右边的操作 -->
                    toolbar: "#LAY-educationalTraining-gradeManagement-gradeInformation-tableButton"
                }]],
            // 开启分页
            page: true,
            // 每页10条数据
            limit:10,
            // height:'full-240',
            // 可以选择每页10、15、20、25、30条数据
            limits: [10, 15, 20, 25, 30]
        });

2.监听班级boolbar事件（表格上方的按钮）详解

 //监听班级toolbar事件，表格上方的按钮
        table.on("toolbar(LAY-educationalTraining-gradeManagement-gradeInformation-table)", function (obj) {
            //获取选中的内容方式
            /*var checkStatus = table.checkStatus(obj.config.id);*/
            console.log(obj);
            //obj.event拿到点击按钮，如果是addGrade调用gradeAddLayer.open
            switch (obj.event) {
                case 'addGrade':
                    var data={tableName:classTable}
                    gradeAddLayer.open(data);
                    break;
                case 'importGrade':
                    layer.msg("导入班级");
                    break;
            }
        });

 3.监听班级tool（表格的右边操作按钮）详解

// 监听班级tool也就是表格右边的操作按钮
        table.on("tool(LAY-educationalTraining-gradeManagement-gradeInformation-table)", function (obj) {
            var data = obj.data;
            var event = obj.event;
            debugger
            switch (event) {
                case 'delGrade':
                    layer.confirm("确定删除此班级？", {title: "提示"}, function (index) {
                        admin.post({
                            url: '/jwAllBjBaseinfo/delete/' + data.id,
                            done: function () {
                                layer.msg("删除成功");
                                //我认为这个方法和Location.reload()方法一个意思重新刷新页面
                                active['search'].call(this);
                            }
                        });
                        layer.close(index);
                    });
                    break;
                case 'detailGrade':
                    //获取到这行数据的id和表格所有的信息
                    var gradeData = {currentGradeId:data.id,tableName:classTable};
                    //调用detail方法
                    gradeDetailInfo.detail(gradeData);
            }
        });