表格渲染

开发工具与关键技术： Visual Studio   layui
作者：黎凤焕
撰写时间：2019年 5月 27 日

很多时候会用到表格，在DW中，使用a标签就可以构建表格，而在VS中，表格的使用比较广泛，表格的使用不是通过a标签就可以实现效果的，在VS中，要使用表格，要通过渲染的方式来实现表格。
表格渲染有三种：
一、方法渲染：用JS方法的配置完成渲染。无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
二、自动渲染：HTML配置，自动渲染。
所谓的自动渲染，即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。
你需要关注的是以下三点：
（1）带有 class=“layui-table” 的 table 标签。
（2）对标签设置属性 lay-data="" 用于配置一些基础参数
（3） 在 th标签中设置属性lay-data=""用于配置表头信息

三、转换静态表格：转化一段已有的表格元素。假设你的页面已经存在了一段有内容的表格，它由原始的table标签组成，这时你需要赋予它一些动态元素，比如拖拽调整列宽？比如排序等等？那么你同样可以很轻松地去实现。

这三种渲染方法，一般使用的比较多的是方法渲染。事实上我们更推荐采用“方法级渲染”的做法，其最大的优势在于你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。而究竟它与“自动化渲染”的方式谁更简单，也只能由各位猿猿们自行体味了。
渲染表格：绑定容器、设置数据接口、在表头设定对应的字段，剩下的…就交给 layui 吧！使用layui 中的元素，根据自己的需要来对表格进行设置。在渲染表格的时候，首先得引用,引用layui.css表格才会渲染成功，如果没有引用，表格渲染不出来，没有想要的效果。

这就是不引用layui.css的效果，引用layui.css的效果是不同的。

找到先前搭建页面的表格名称，对它进行渲染，field里面的名字要与数据库的字段名一样，一样才可以渲染出来。URL是数据的借口，说明那个控制器上的方法名。
var layer, layuiTable;
var tabExpenseDetail;
$(function () {
layui.use([‘layer’, ‘table’], function () {
layer = layui.layer, layuiTable = layui.table;
tabExpenseDetail = layuiTable.render({
elem: “#tabExpenseDetail”,
url: “/ChargeManagement/ExpenseDemand/SelectPatientAlls”,
cols: [[
{ title: ‘选择’, type: ‘checkbox’ },
{ field: ‘CardNumber’, title: ‘卡号’ },
{ field: ‘StreamNumber’, title: ‘门诊流水号’ },
{ field: ‘Name’, title: ‘姓名’ },
{ field: ‘Telephone’, title: ‘联系电话’ },
{ field: ‘ProjectNumber’, title: ‘项目编号’ },
{ field: ‘MedicineName’, title: ‘项目名称’ },
{ field: ‘Specification’, title: ‘规格’ },
{ field: ‘Quantity’, title: ‘数量’ },
]],
page: {
limit: 10,//指定每页显示的条数
limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
}, //开启分页
data: [],//加载本地数据
});
});
})