layui.table

开发工具与关键技术： MVC

作者：彭水清

撰写时间：2019/4/15

Layui里面包括了很多模块，但是你要用那个模块就只加载那个模块，而不用全部引进来。Layui有很多功能，但是我可以单独使用一个功能，比如我只用他表格这个功能，而我只需要加载表格这个模块就够了，因为表格的样式layui会自动的给你加载，相应的其它js它也会自动的给你加载。你想要哪一块就给你加载哪一块，而其他不用的就不用加载，这样就会减少页面的大小。layui 框架可以直接在官网下载即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js。

table 模块也将是 layui 重点维护的项目之一。

创建一个table实例最简单的方式是，在页面放置一个元素

，然后通过 table.render() 方法指定该容器，如下所示

上面你已经看到了一个简单数据表格的基本样子，你一定迫不及待地想知道它的使用方式。下面就是它对应的代码：

首先看我们要用到哪些模块，在这里我用到了’layer’弹出层和’table’数据表格，接下来function会对它的表格数据进行初始化，还有就是表头的一些结构,表头可以自定义。

以下就是layui.table的代码：

//加载&&初始化layui模块

layui.use([‘layer’, ‘table’], function () {

layer = layui.layer,

layuiTable = layui.table;

            //初始化表格

tabStudent = layuiTable.render({

elem: ‘#tabStudent’, //html table id

                  height: 250,

                url:

“selectStudentAll”, //数据接口

cols: [[//表头

{ type: “checkbox”, fixed: “left” }, //多选框列,fixed:‘left’ 将列固定在左边

{ type: “numbers”, title: “序号” }, //序号列，title设定标题名称

{ field: “studentID”, title: “studentID”, hide: true }, //hide:true 隐藏列

{ field: “UserID”, title: “userID”, hide: true },

{ field: “StudentNumber”, title: “学号”, align: “center” },// align: "center"居中对齐

{ field: “StudentName”, title: “姓名”, width: 100, align: “center” }, //width: 100 指定宽度，align
指定对其方式

{ field: “StudentIDNum”, title: “省份证号”, align: “center” },

{ field: “StudentSex”, title: “性别”, width: 70, align: “center” },

{ field: “AcademeName”, title: “学院”, width: 150, align: “center” },

{ field: “SpecialtyName”, title: “专业”, width: 150, align: “center” },

{ field: “GradeName”, title: “年级”, width: 80, align: “center” },

{ field: “ClassName”, title: “班级”, align: “center” },

{ field: “UserNuber”, title: “账号”, align: “center” },

               // {

field: “操作”, templet:
setOperate, align: “center”, field: “right” }

]],

          page: {

                 limit: 10,//指定每页显示的条数

                 limits: [5, 10, 15, 20, 25, 30, 35, 40, 45,

50],//每页条数的选择项

               }, //开启分页            

});

一切都并不会陌生：绑定容器、设置数据接口、在表头设定对应的字段，剩下的…就交给 layui 吧。

新手上道，大神勿喷，请多多指教。如果有更好的方法欢迎在评论区教导喔！