绑定表格数据

                   绑定表格数据

开发工具与关键技术：MVC专题技术
作者：彭春怡
撰写时间：2019/4/21

大家好，今天给大家介绍的是项目里面的表格是如何绑定数据。简单是挺简单的，不难理解就很容易了。就是在数据库查询出来进行绑定就可以了，绑定呢需要在视图里面进行绑定，把表格需要的内容进行绑定便可。
下面正式介绍表格的绑定：
图1：

图1是项目里面的表格，我们需要绑定的数据的表头。序号、角色、描述、身份、创建时间、操作这些是我们需要绑定的数据。表头的序号用“type”，“title”是设定标题的名称。
var tabUserType： tabUserType是表格的名字，是声明tabUserType表格。
var layer, layuiTable： 是保存layui模块，为了以便全局使用
下面是绑定页面数据的方法：
$(function () {
layui.use([‘layer’, ‘table’], function () {
layer = layui.layer;
layuiTable = layui.table;
首先是加载layui模块，还有初始化layui。
tabUserType = layuiTable.render({
elem: “#tabUserType”
url: “/JurisdictionManagement/Jurisdiction/SelectUserType”,
进行执行js渲染，获取“elem”表格的名称，然后是数据接口“url”。
cols: [[
{ type: ‘numbers’, title: ‘序号’ },
{ field: ‘UserTypeID’, title: ‘UserTypeID’, hide: true },
{ field: ‘UserType’, title: ‘角色’ }
{ field: ‘Describe’, title: ‘描述’ },
{ title: ‘身份’, templet: setTypeClass },
{ field: ‘FoundTime’, title: ‘创建时间’, sort: true },
{ title: ‘操作’, templet: setOperate, width: 160, align: ‘center’, fixed:‘right’ }
]],
Cols：这一段就是绑定表格数据的内容了，就是绑定图1表头的数据：序号、角色、描述、创建时间操作。根据各个定义的代码名称填写便可。“hide”是隐藏功能，templet自定义身份函数setTypeClass。Sort在队列里按顺序排序功能。

图2：

page: {
limit: 11,
limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],
},
});
limit：11，是图2中每页数据条显示多少条的功能，你想让每页数据条，显示多少条改一下数字就行了。“limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],”是每页条数的选择项。

下面呢是监听事件row：
layuiTable.on(‘row(tabUserType)’, function (obj) {
var data = obj.data;
获取点击事件行的数据。
obj.tr.addClass(‘layui-table-click’).siblings().removeClass(‘layui-table-click’);
把选中的样式标注出来
});
});
});
总结：绑定数据的内容就是这样来，是挺简单的，最重要的是数据接口是否正确，还有获取到的表格名称是否正确，其它就按照以上方法进行绑定便可。今天的介绍内容就是这样啦，希望可以给大家带来一点帮助。