数据表格

开发工具与关键技术：VS+MVC
作者：茅凯翔
撰写时间：2019年5月25日

数据表格大家都不陌生吧，数据表格通过数据库把数据传输到页面上，需要表格才能让数据不会乱掉，并且整齐的展现在页面上供人们看。表格你可以徒手撸出来，或者可以试用一下插件，这个插件就是，你们可以去查一下，很好用的插件，里面有我们需要的很多东西在里面（我并不是帮他们做广告，不用我做，他们已经被广泛的运用了）。给大家看看这款插件：

接下来我们开始用这个插件，首先你要把这个插件的css和js拉出来，这样插件才能用。用个div包裹着整个表格，再用个div包裹着小表格，table就是表格的标签，给id，不给的话后面的js该怎么获取。它有三个属性，第一个属性是lay-even，用于开启隔行背景，可与其它属性一起使用。第二个是lay-skin=“属性值”是用于设置表格的风格，它三种风格（line = 行边框风格，row = 列边框风格，nob = 无边框风格），你要是想用默认的就不用设置这个属性了。还有最后一个是lay-size=“属性值”，是用于设置尺寸的，有两种尺寸（sm = 小尺寸，lg = 大尺寸），如果你想用原尺寸的话就不必设置这个属性。

接下来要声明第一个学生表， 第二个加载层，第三个是保存layui模块以便全局使用，第四个是导入表。

最后开始绑定表格数据，开始表格渲染，用一个方法，然后添加主键，添加提示层与表格层，用全局变量来接收，提取出刚刚渲染的table，赋值。执行学生渲染。elem是选择器，就是我上面说的id，url是路径，也不可以不要。接下来就是表头了，第一个复选框列，也就是打钩用的框，加一个fixed：left固定在左边。第二个是序号列，给数据排序的。还有学生ID和用户ID都添加hide：true来隐藏起来。然后后面的就是你要添加进去的数据的名称，如果你想在后面放按钮也可以，在最后设置一个就好了，你可以给每个设置指定的高宽度，也可以设置它们的对齐方式，打完了要看看你的页面显示的名字有没有与数据库的英文名字符合，符合才有数据。

差点忘了给表格一个切换页数的功能，limit：10指的是页面中每页的数据条数，limits：[5,10,15,20……]指的是页面中每页的数据条数可以选择，可以选择每页显示5条数据，或者10条。最后开启分页，data是加载本地数据。