简单使用layui完成表格

开发工具与关键技术：Visual Studio 2015  layui
作者：孙水兵
撰写时间：2019年5月 15日

一、layui及数据表格的简介
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，而且门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋。
layui的兼容性：layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。
Layui的数据表格（table 模块）：在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。
layui官网：www.layui.com （可下载）

二、使用layui完成数据表格
需达到的目标：表格的第一行为表头，第一列为单选框，第二列为表格中数据的序号，第三列为学院的名称，第四列为学院代号，第五列为操作列，可以对对应的那行数据进行操作。这样做的好处是可以更方便、更直观的对数据进行操作。

1． linq的前期工作
由于控制器中需要用到linq从数据库中将数据查询出来，因此，使用linq的前期工作是必不可少的，而linq的前期工作也很简单，只需在控制器最上端引入Models，实例化Models。具体可以参考我的linq方面的文章。

2.代码
HTML代码
HTML代码很简单，最主要的就是一个table标签，其中存在数据表格id，其中的lay-filter是事件过滤器，他一般是用于监听特定的自定义事件。

	   <div class="row">
            <div class="col"> <table id="tabAcademe" lay-filter="tabAcademe"></table>
            </div>
        </div>

JS代码
首先，得引用layui的JS文件，虽然layui部分组件依赖jQuery，Layui部分组件依赖jQuery（比如layer），但是并不用去额外加载jQuery。因为layui已经将jQuery最稳定的一个版本改为Layui的内部模块，当你去使用layer的时候，它会首先判断你的页面是否已经引入了jQuery，如果没有，则加载内部的jQuery模块，如果有，则不会加载。这里由于其他地方用到的，所以引用的jQuery文件

    <script src="~/Plugins/jquery-3.2.1.min.js"></script>
    <script src="~/Plugins/layui/layui.js"></script>

之后，在JS中先声明一些全局变量方便后面引用，然后在jQuery read事件中加载layui中的数据表格模块（table模块），然后用layuiTable（表格模块名）接收layui模块。其中layer模块是其他地方需要的，数据表格不需要加载，加载其他模块也是类似，使用layui.use(mods, callback)的方法，如果只需加载一个模块是不需要使用数组的，直接加载就可。加载完数据模块之后，需要初始化数据表格（形式：表格名=接收layui模块的变量.render({});）。其中的elem是表格的id（HTML中的）；url:查询出数据的路径；cols:表头，其中的type是那一列的类型，radio是单选框，number是序号列等等，注意，其中的filed中的需要和控制器中查询出来的一致，以便查询出来回填数据，隐藏列一般是数据的主键ID，为的是后续更好对该数据进行操作；page:开启分页，limit: 指定每页显示的条数， limits: 每页条数的选择项。

    var layer, layuiTable;//保存layui模块以便全局使用
        var tabAcademe;//存放表格
        $(function () {
            //layui模块的使用
            layui.use(['table', 'layer'], function (args) {
                layer = layui.layer;  layuiTable = layui.table;
                  //表格初始化
                tabAcademe = layuiTable.render({
                    elem: '#tabAcademe',
                    url: '/SystemManagement/CollegeInfor/SelectAcademeAll', //数据接口
                    cols: [[//表头
                        { type: 'radio', fixed: 'left' },//单选框列,fixed:'left' 将列固定在左边
                        { type: 'numbers', title: '序号' },//序号列，title设定标题名称
                        { field: 'AcademeID', title: 'AcademeID', hide: true },//hide:true 隐藏列
                        { field: 'AcademeName', title: '学院名称' },
                        { field: 'AcademeCode', 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, 50]//每页条数的选择项
                    },
                });
      });
  });

表格的监听事件，写在layui加载模块之中，监听单击事件形式为：表格模块名.on(‘row(表格名)’，function（）{})；监听双击事件将row改为rowDouble，然后获取选中的数据，之后的标中选中样式和单击选单选框或者单击选中/取消复选框就是固定的了

    layuiTable.on('row(tabAcademe)', function (obj) { //监听单击事件（双击事件为rowDouble)
            var data = obj.data;//获取点击数据 
            console.log
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click'); //标注选中样式 
            obj.tr.find('div.layui-unselect.layui-form-radio')[1].click();//****单击选中单选框 
            // obj.tr.find('div.layui-unselect.layui-from-checkbox')[0].click(); //****单击选中/取消复选框
        });

控制器代码
需用到的两个实体类LayuiTablePage和LayuiTableData：
LayuiTablePage：用来分页，其中page 代表当前页码，limit 代表每页数据量。然后用方法计算分页开始的序号和分页结束的序号。如第一页的页码为1，若10条每页，limit为10，分页开始序号 = （1-1）10 = 0；结束序号 = 110-1 = 9。
LayuiTableData：封装数据的方法，将查询到的数据封装并将其返回给视图。
LayuiTablePage

    /// <summary>
    /// layui table组件分页请求数据封装
    /// </summary>
    public class LayuiTablePage
    {
        /// <summary>
        /// page 代表当前页码
        /// </summary>
        public int page { get; set; }
        /// <summary>
        /// limit 代表每页数据量
        /// </summary>
        public int limit { get; set; }

        //方法
        /// <summary>
        ///分页开始序号
        /// </summary>
        public int GetStartIndex()
        {
            return (page - 1) * limit;
        }
        /// <summary>
        /// 分页结束序号
        /// </summary>
        public int GetEndIndex()
        {
            return page * limit - 1;
        }

    }

LayuiTableData

 public class LayuiTableData<T>
    {
        /// <summary>
        /// 数据状态码——可以不设置
        /// </summary>
        public int code { get; set; }
        /// <summary>
        /// 状态信息——可以不设置
        /// </summary>
        public string msg { get; set; }
        /// <summary>
        /// 总行数——必须
        /// </summary>
        public int count { get; set; }
        /// <summary>
        /// 数据——必须
        /// </summary>
        public List<T>data { get; set; }
    }

先创建一个方法，引用LayuiTablePage，然后用linq查询，从数据库中将需要的数据查出，注意：分页的时候要使用orderby进行排序，可以根据主键ID排序，然后计算查询出多少条数据，之后对所有数据分页，之后用LayuiTableData方法将数据封装，最后一以Json格式将数据返回给页面。

  public ActionResult SelectAcademeAll(LayuiTablePage layuiTablePage)
        {
            var linq = from tbAcademe in myModel.SYS_Academe
                       orderby tbAcademe.AcademeID
                       select tbAcademe; 
            int totalRow = linq.Count();//查询SYS_Academe的总行数
            //分页查询SYS_Academe的数据
            List<SYS_Academe> list = linq
                                     .Skip(layuiTablePage.GetStartIndex())
                                     .Take(layuiTablePage.limit)
                                     .ToList();
            //封装layui table数据
            LayuiTableData<SYS_Academe> layuiTableData = new LayuiTableData<SYS_Academe>
            {   count = totalRow,
                data = list,  }; 
            return Json(layuiTableData, JsonRequestBehavior.AllowGet);
        }