Layui表格绑定 - 爱码网

开发工具与关键技术：VS C#
作者：梁茵茵
撰写时间：2019年 4月 26日

为了用户在页面上更方便查询数据，就使用了一个表格来绑定数据库的数据，把数据显示在页面上。Layui封装了一个很方便的表格，可以固定表头、行、左列、右列；可以根据个人需求来显示数据的分页、分页的条数、总共的条数；可以拖拽改变列的宽度；可以搜索、条件筛选；还可以支持排序、支持多级表头、支持单元格的自定义模板、支持对表格的重载、支持单元格编辑等等一系列的功能。我们要用到这个Layui表格就要下载它的插件，Layui操作文档里也有具体的使用方法。
绑定一个员工信息表步骤如下：
1、把下载好的插件放到项目里再引入它的样式：

 <link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />

2、构建一个表格：

 <div class="row">
         <div class="col">
              <table id="绑定具体的数据" lay-filter="绑定具体的数据"></table>
         </div>
    </div>

3、引入layui的JS：

<script src="~/Plugins/layui/layui.js"></script>

注意：如果要用渲染的方式就用

 <script src="~/Plugins/layui/layui.js"></script>这个JS；

如果直接使用就用

  <script src="~/Plugins/layui/layui.all.js"></script>

这个JS。因为构建的table是空白的，每一列都没有构建，所以要用渲染的方式来构建列。这两个JS有点相似，要区分这两个JS的区别。
4、在Layui操作文档里有三种初始化渲染方式，可以根据个人所需灵活使用。
Layui表格绑定
5、因为我们现在要操作的数据来源于数据库，要接收控制器传过来的变量，还会用到post异步提交数据，所以用第一种方式渲染。
执行渲染，构建这个表格，table.render()方法返回一个对象。设置数据接口、在表头设定对应的字段：

employee = layuiTable.render({
                    elem: '#employee'//指定原始表格元素选择器（推荐id选择器）
                  , url: '/区域/控制器/方法名称/' //数据接口
                  , cols: [[ //构建表头的列
                          { type: 'numbers', title: '序号' },//序号列，title设定标题名称
                          { field: 'employeeID', title: 'employeeID', hide: true },
                          { field: 'employeeNum', title: '部门' },
                          { field: 'employeeName', title: '员工姓名' },
                          { field: 'telphone', title: '联系电话' },
                          { field: 'address', title: '家庭地址' },
//表头的列要跟数据库的字段保持一致
                          { title: '操作', templet: setOperate, width: 160, align: 'center', fixed: 'right' }//width: 160 指定宽度，align 指定对其方式
                          ]]
                  , page: { //开启分页
                    limit: 10,//指定每页显示的条数
                    limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
                }, 
                });

6、构建好表格就绑定数据，把数据以单元格的方式赋值到表格里。
效果图如下：
Layui表格绑定