Table数据表格—方法渲染

开发工具与关键技术：Visual Studio ASP.NET MVC

作者：刘剑鸿

撰写时间：2019年04月15日 星期一

        Table数据表格—方法渲染         

table 模块是layer最核心组成之一，它用于对表格一些列功能和动态化数据的操作。涵盖日常事务所涉及的的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。

table 模块有三种初始化渲染方式：方法渲染、自动渲染、转换静态表格。

（本截图来自layer离线文档）

下面介绍基础参数的设定放在了JS代码的方法渲染。方法渲染执行前要进行三步操作：1.
layui框架样式 2. 构建表格 3. 引用layui.js 。执行渲染通常用到的基础参数有：elem: 指定原始表格元素选择器（推荐id选择器）方法渲染方式必填、height：指定容器高度、url：数据接口方法渲染方式必填、 page：开启分页、cols: 设置表头,值是一个二维数组,方法渲染方式必填.

下面是具体操作代码，

var tabAcademe;//bsgrid的 表格
   var layer, layuiTable;//保存layui模块以便全局使用
   $(function () {
        //：方法渲染
        layui.use(['layer', 'table'], function () {//layer弹出层
            layuiTable = layui.table;
            layer = layui.layer,
            //执行渲染
           //第一个实例
            tabAcademe = layuiTable.render({
                elem: '#tabAcademe'//指定原始表格元素选择器（推荐id选择器）
              , height:500//容器高度
              , url: '/SysemMangement/CollegeInfor/SelectAcademeAll/' //数据接口
              , page: true //开启分页

 , 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, 45, 50],//每页条数的选择项

            }, //开启分页

            });

数据接口那里的 SysemMangement是区域的名称，CollegeInfor是该区域的控制器名称，SelectAcademeAll是查询数据的函数名称。而在cols中的 setOperate 是一个方法名称，其方法功能是自定义模板，具体代码如下：

  function setOperate(data) {

            //获取绑定表格的主键ID

            var academeId = data.AcademeID;

            var btns = "";

            btns += '<button type="button"
            class="layui-btn layui-btn-xs" onclick=openUpdate(' + academeId + ')>修改</button>';

            btns += '<button
          type="button" class="layui-btn layui-btn-xs
         layui-btn-danger" onclick=saveDelete(' + academeId + ')>删除</button>';

            return btns;

        }

方法里面的 academeId 主要起到一个传递参数的作用，与控制器的接收参数是相对应的。所以自定义模板在执行渲染中占很重要的位置。下图是渲染完出来的结果

方法渲染其最大的优势在于你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。
新手上路，请多多指教！！！