绑定表格二

绑定表格（二）

开发工具与关键技术：Visual Studio 


撰写时间：6月28号  

作者：  曾子千  

平时我们显示在页面上的是表格是静态表格，那么我们如果弄个动态表格，让表格随着数据库的变动起来，该怎么做呢？

一、 把下载好的插件放到项目里再引入它的样式：

二、构建一个表格：
<divclass=“row”>
<divclass=“col”>
<tableid=“绑定具体的数据” lay-filter=“绑定具体的数据”>



三、引入 layui 的 JS：
src="~/Plugins/layui/layui.js"
注释：如果要用渲染的方式就用
src="~/Plugins/layui/layui.js"
如果直接使用就用
src="~/Plugins/layui/layui.all.js"
因为构建的 table 是空白的，每一列都没有构建，所以要用渲染的方式来构建列
操作的数据来源于数据库，要接收控制器传过来的变量，还会用到 post 异步提交数据，构建这个表格，table.render()方法返回一个对象。设置数据接口、
在表头设定对应的字段：

$(function () {layui.use([‘layer’, ‘table’], function () {
layer =layui.layer,
layuiTable =layui.table;
执行渲染/第一个实例
tabDepartment = layuiTable.render({
elem: ‘#tabDepartment’,//指定原始表格元素选择器（推荐id选择器）
url: ‘/KucunGuanli/Department/CsbmDepartment’,//数据接口
cols: [[ //表头
{ type: ‘radio’, fixed: ‘left’ },//单选框列,fixed:‘left’ 将列固定在左边
{ type: ‘numbers’, title: ‘序号’, width: 50 },//序号列，title设定标题名称
{ field: ‘DepartmentID’, title: ‘DepartmentID’, hide: true, align: ‘center’ },//hide:true 隐藏列+
{ field: ‘DepartmentName’, width: 150, title:‘部门名称’, align: ‘center’ },
{ field: ‘DepartmentHead’, width: 150, title:‘部门负责人’, align: ‘center’ },
{ field: ‘Phone’, title: ‘电话’, align: ‘center’, width: 200 },
{ field: ‘Remark’, title: ‘备注’, align: ‘center’ },
{ title: ‘操作’, templet:etOperate, width: 200, align: ‘center’, fixed: ‘right’ }//width: 160 指定宽度，align 指定对其方式]],
page: {limit:10,//指定每页显示的条数
limits:[5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
}, //开启分页
data: []
});
成果图：