开发工具与关键技术: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的样式图就不发了,大家都会。最后到这里就结束了。