Layui中的数据表格渲染

学习前端代码的朋友们应该都有所闻layui这个框架，这是一款遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用的前端 UI 框架。如果有需要可以通过官网下载得到，使用起来也极其方便仅需引入以下两个文件

1.	./layui/css/layui.css
2.	./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

下面我们来聊以下layui中数据表格的渲染部分。Layui中的数据表格渲染具体有三种初始化渲染方式 1方法渲染 2自动渲染 3转换静态表格。
其中我最为常用的也是最推荐的是第一种方法渲染 机制：用JS的配置完成渲染 使用场景：无需写过多的HTML，在JS中指定原始元素，再设定各项参数即可。
使用例子：
1.需要一个原始的table标签，标签上添加一个选择器
eg: <table id="demo" lay-filter="test"></table>
2.申明变量
eg:var table = layui.table;
3. 执行渲染
eg:

渲染中需要使用到的基本参数有：
elem:指定原始table容器的选择器或DOM（必写） url:异步数据接口相关参数路径（必写） cols:值是二维数组，用于设置表头（必写） page:开启分页（默认false）
limit:每页显示的条数（默认：10，值需要对应limits参数的选项） limits:每页条数的选择项（默认[10,20,30,40,50,60,70,80,90]）;
其中cols的表头参数有：
filed:设定字段名，字段名是表格数据列的唯一标识。
title:设定标题名称
fixed固定列（left,right）一旦被固定将不随滚动条滚动
align:单元格排列方式（left,right,center居中）
templet:自定义列模板（可将原始数据转化为其他格式）
以上的参数仅仅是基本渲染表格中的一部分，有需要的可以到layui官网查看更详细的内容。
当例子中的表格数据被查询出来后渲染视图效果如下：

自动渲染也有着其中的特色：其使用HTML配置，更专注于HTML的表头部分，无需多写JS部分被内容。
所谓自动渲染就是，在一段table容器中设定好相应的参数，由table模块内部自动对其完成渲染，其中需要关注的为以下几点：
1） 带有class=“layui-table”的

标签，可通过在标签上添加lay-data={}
2） 对标签设置属性 lay-data=””可为其容器设定宽高，异步数据接口路径，是否分页等等。
3） 在

标签中设置属性layui-data=””用于配置表头信息。 例子：

静态转换表格：意为，当你用于一段由原始table标签组成粗劣的表格，你可以通过layui的某些属性将其转换为样式喜欢的表格。

==》

以上就是我对数据表格渲染的部分内容分享，由需要的可以到官网查看更详细的内容，谢谢大家的浏览。若有异议欢迎指正喔！