表格初始化

ゝ一世哀愁。 2022-02-13 08:39 212阅读 0赞

开发工具与关键技术：正则表达式  
作者：文泽钦  
撰写时间：2019年4月23日  
存放表格的div，没有存放表格的盒子，后面写玩初始化的方法页面还是空的，我的同桌在写表格初始化，就是没有给装表格一个容器div，导致找了半天，把老师的代码都复制过来了，页面上还是空白，后来我告诉他，要给它一个装表格的容器，他刚开始还不太相信，最后他加上了，表格就加载出来了:

###  ###

表头工具栏，默认是关闭的，需要在表格初始化时手动开启：

###  ###

表格初始化也需要用上它自己的插件，现在就把它引入：

###  ###

声明一个全局变量，接收表格：

###  ###

var tabEmployee;//声明一个变量放表格数据

请求方法：

###  ###

$(function () {
    //加载layui模块
     	 layui.use(['layer', 'table'], function () {
       	  layer = layui.layer,
          layuiTable = layui.table;
    
     //初始化表格
          tabEmployee = layuiTable.render({
          elem: '#tabEmployee, //获取表格id
          url: "selectStudentAll",//请求路径
    //表头初始化
          cols: [[//设置表头
          { type: "checkbox", fixed: "left" },//多选框,fixed:"left"固定在左边
          { type: "numbers", title: "序号" },
          { field: "EmployeeID", title: "employeeID", hide: true },//修改的时候要用上
          { field: "UserID", title: "ueserID", hide: true },//隐藏id
          { field: "studentID", title: "studentID", hide: true },//隐藏id
          { field: "UserID", title: "userID", hide: true },//为后面修改和删除准备
          { field: "EmployeeNumber", title: "编号", align: "center" },
          { field: "EmployeeName", title: "姓名", width: 150, align: "center" },        
           { field: "Phone", title: "电话", align: "center" },
          { field: "Cellphone", title: "手机", align: "center" },
          { field: "DeoartmentName", title: "部门",align: "center" },
          { field: "PositionName", title: "职位",align: "center" },
          { field: "Address", title: "地址",align: "center" },
          { field: "Remark", title: "备注", align: "center" },
          {title:"操作",templet:setOperate,align:"center",fixed:"right"}//设置按钮
        ]],
              page: {
                     limit: 10,//指定每页显示的条数
                     limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
                        },
                        //tolbar:true//直接设置为true（开启），却不可以自定义工具
                        toolbar: "#tabEmployeeToolbar"//自定义工具栏
                    });
    
               //监听行单击事件(固定写法)
               layuiTable.on('row(tabEmployee)', function (obj) {
               //console.log(obj);//检查（控制台输出）有没有选中值
               //标注选中行样式
               obj.tr.addClass("layui-table-click").siblings().removeClass("layui-table-click");
               //选中行，勾选复选框
               obj.tr.find("div.layui-unselect.layui-form-checkbox")[1].click();
                    });
                });
            });
    //设置操作按钮
     function setOperate(data) {
      //console.log(data);//data值是表格初始化的全部值tabEmployee；一次输出一页数据，怕打错就复制输出值
    var btn = "";
         btn += '<button class="layui-btn layui-btn-xs">修改</button>';
    	 btn += '<button class="layui-btn layui-btn-xs layui-btn-danger">删除   </button>';
    return btn;
        }

表格初始化就完成了，还没有在控制器写查询的方法，所以还没有数据返回：  
![在这里插入图片描述][20190427143508613.png]  
表格初始化也不是很难，几乎都是固定写法，需要变得只是名称，和id了，多用几次就会了。

[20190427143508613.png]: /images/20220213/aad32da26dc74fca8871c3c16547632c.png