渲染表格

开发工具与关键技术：vsX 和 jquery

作者：戴怡斌

撰写时间：2019.4.16

下面就来看一个渲染表格的案列，表格相信大家很清楚，几乎随处可见，书本上，广告里等等。

表格用来记录某些事物，也可以登记人数，还可以记录人口中男女的比例

比如，一款游戏，好不好玩，有多少人下载，喜欢玩这款游戏的是未成年人多还是青年多。

怎样让它一眼看上去就很明白呢。这个时候一个表格就可以了。

以一个游戏表格的案列来给你们详解

打开vs创建这些不多说，创建完后，先引用js，不然$会一直会报错，

创建表格直接引用layui，这是别人已经建好的，直接引用就可以，里面也有css的文件，根据自己的情况引用。

之后先定义两个变量，

var tables;//layui的表格

var layer, layuiTable;//保存layui模块以便全局使用

接下来就开始了，

layui.use([‘table’, ‘layer’], function () {};

渲染表格有多种方法，方法渲染，自动渲染 最常用的是方法渲染

layer = layui.layer, layuiTable = layui.table;

现在开始制作表格中的表头

tables= layuiTable.render({});

如果使用方法渲染，那数据接口就不需要了

url: '/Demo/table/
’ //数据接口

可以直接指定原始表格元素选择器（推荐id选择器）

elem:
‘#Demo’

最后设置表头，cols，随自己喜欢，这里以一款游戏为案列

cols: [[{ title: ‘序号’, type: ‘numbers’ },]]，

type设定的类型有几种，复选框用checknox

单选框用radio，
normal：常规列，不需要设定。

序号列，title：设定标题名称，type：设定列的类型，numbers：序号列

图片里的 field：设定字段名，字段名非常重要，而且也是表格数据列的唯一标识

图片里的 align：单元格排列方式，通常默认的都是left，也就是左边

可以设置的值有 center：居中，right：靠右

图片里的 width：宽度，单位有%，px，rem

表格渲染就在这里制作完成了。

Css的样式用的也是layui里的css

Layui里的css样式也早就设置好了的，只需要引用就行，不需要自己写

这里渲染的只有表头，表单并没有渲染

制作完成的最后，效果图献上

这里面的数据只是一个自己写出来消遣的，不能当真。

表格的应用有很多，这只是其中相对简单的一种，

Css的样式图就不发了，大家都会。最后到这里就结束了。