（作者：郭鑫 撰写时间：2019年5月13号）
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用，非常方便，在开发的时候会经常用到，特别是里面的数据表格，既方便又不失美观。用这个数据表格就四个步骤：“引用插件——创建一个装表格的“画板”——“画”表格——查数据，放到数据表格”。
第一步：引用；
引用一共要引用两个插件，一个是构建CSS样式的css文件，一个是表格功能的JS文件，引用如下
CSS引用：<link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />
JS 引用：<script src="~/Plugins/layui/layui.js"></script>
第二步：在页面上构建一个盒子，存放接下来要生成的表格；
就使用一个table标签存放即可，其余两div只是限制一下，在table标签里面还有放有两个内容，一个是Id，一个是lay-filter。Id是为了把数据绑定到数据表格，lay-filter是事件过滤器。可以在很多地方看到看到这个属性，他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器。Id值和lay-filter值可以相同也可以不同。
第三步：“画表格”；
画板已经有了，如果想画画的话，那你必须还要有一支画笔才行。首先要定义两个两变量。
LayuiTable是用来加载数据表格模块的，tabOrganization是用来存放表格的
然后在加载事件里面加载layui的数据表格模块，下面就是加载的方法，table为加载的模块名称，加载完成后就放到前面声明好的layuiTable中，以便与接下来的使用。
画笔准备好后就可以开始做表格了，对表格进行初始化。tabOrganization就是前面声明存放表格的变量，layuiTable则是上面加载模块时的存放的变量，render就是初始化表格的方法。
初始化表格的方法里面有一般有三个值，elem、cols、url(或data)。elem是用来绑定存放这个数据表格的容器，就是绑定页面上那个table标签；cols是用来设置表头行数据的；url和data都是用来放数据的，只是用url是要请求控制器查询数据库查询数据，data是直接为表格数据赋值。如果数据多的，还可以使用分页，分页用的是page；page里面有两参数：一个是limit，limit: 10，就是指定每一页显示10条数据；一个是limits:[5,10]，表示的是每页的条数分组，在页面上是可以选择每页的条数的，这就是设置每页分组条数的地方。如果不分组，那就是默认显示10条数据，分页也是每10条数据的往上加。
接着就是表头了，表头的内容放在cols里面，需要用两个中括号包裹着，一般数据表格前面都会有一个单选框或者复选框，然后就是列的序号，接着才是数据的内容。
选择框和序号用的是type，type可选的值有5个，分别是：
normal（常规列，无需设定）
checkbox（复选框列）
radio（单选框列）
numbers（序号列）
space（空列）
内容项用的是field，field是用来设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识，{ field: 'ChineseName', title: '中文名称' },
field后面紧跟着的是放入数据时对应的名称，不再页面上显示；
title是设定需要显示在页面上的字段，就是表头内容了；
主要的就是这几个内容了，其它的还有一些属性，例如
fixed：意思是将该列数据固定，有两个可选值left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。
align：也是固定的意思，不过align是固定文字，即单元格排列方式。可选值有：left（默认）、center（居中）、right（居右）。
hide：隐藏，默认值为false（不隐藏），可设定为true（隐藏）。
width：设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比
请结合实际情况，对不同列做不同设定。
效果如下：
这样子表格就做好了，但是也就只是把表格显示了出来，如果要对表格点击操作的话还要对表格进行监听，监听用的就是table标签里面的lay-filter属性值了，也就是这里的tabOrganization。layuiTable依旧是加载的数据表格模块，row监听的是单击事件，rowDouble监听的是双击事件，监听事件里最重要的就是获取到所点击行的数据，获取数据直接就是回调函数的参数点出来就行。obj.data就获取到点击行的数据了。还有就是要让用户知道已经选中了该行，就要给这一行添加一些样式，顺便把选择框选上。这样，一个简单的数据表格就做好了。
