表格渲染

                             表格渲染

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Visual Studio 2015  表格渲染

作者： 李杨

撰写时间：2019-05-10

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

今天我们就来讲讲如何使用layui渲染table数据表格。

Layui有三种初始化的渲染方法，大家可以按照个人的喜欢和实际情去灵活应用。

第一种方式：方法渲染

            用js方法的配置完成渲染，不需要写过多的HTML，在js中指定原始元素，再设定各项参数就可以了。

 

第二种方式：自动渲染

            HTML配置，自动渲染，不需要过多的js，比较专注于HTML表头部分

 

第三种方式：转换静态表格

            转化一段已有的表格元素，不需要配置数据接口，在JS中指定表格元素，并简单的给表头加上自定义的属性就可以了。

还是推荐使用第一种方法渲染的方式。

 

 

如图完整的最终效果图（来源于老师）：

首先呢第一步就是要引入layui的css和js文件

接下来就是在页面要有一个table标签，方法渲染的方式就是不需要过多HTML。

所以这里原始的table标签只需要一个就可以了。

 

如下图（代码来源于老师）

 

然后再去写js渲染表格的代码 ，下面的代码就是layui方法渲染的方式。我们去了解一下

其实这是“自动化渲染”的手动模式，只是方法渲染将基础的参数的设定放在了js代码中。

如下图（本代码来源于老师）

 

方法渲染的方式它最大的优势是在于你可以脱离HTML文件，而专注于js的本身，特别是对于项目经常改动发布，它的便捷性会体现的比较明显些。

然后其他两种方法呢，“自动渲染” “转换静态表格”在layui的网页里各种详情和使用方法里面都有。