开发工具与关键技术： MVC
撰写时间：2021/5/18

Layui框架作为我们日常常用的框架，其中的数据表格因其便捷也被我们广泛应用。

1.首先引入layui文件是必不可缺的，在视图层代码内分别引入layui.css以及layui.js
注意：由于框架的js是依赖于jquery的，所以引入layui.js之前需要引入jquery库，如下图

2.确定放置表格的位置，在页面表格位置处添加

3.layui数据表格有三种初始化渲染方式，分别是js方法渲染、自动渲染，转换静态表格，推荐采用js方法渲染，因为随项目数据更改，js方法渲染的效率更高，更便捷。采用js方法渲染表格如下图所示，在页面加载时：
（1）初始化layui模块我们使用数据表格，则在use处放上‘table’，layui.use(‘table’,function(){});
（2）将layui.table赋值给layuiTable，便于后面使用。使用render（）方法开始渲染表格。
（3）render（）方法内规定要使用的参数，平常使用多个参数需要使用{}括起来，常用的有：
elem：“表格id”//这个属性指定渲染到哪个表格，通常使用id值来找到表格
url：‘异步数据接口’，//获取表格数据的路径
cols：[[
{ title：‘表头名称’，type：‘设定列的类型’，fieId：‘此列对应数据名’，templet：自定义列函数名（函数return什么它就输出什么），rowspan/colspan：所占行数/列数 …}
]]， //cols用于设置表头，基本值是二维数组,其它参数可到layui官网查看参数一览表
page：查询出的数据是(true)否(false)分页处理，也可自定义{
limit:刚开始每页显示数据的条数，
limits:值是一个数组，设置可选择每页显示的条数，
curr：决定刚开始加载从哪一页开始显示
}
data：[] //值为数组类型，用于直接赋值数据
还有很多详细的属性可以到layui官网查看基本参数一览表

4.通常我们使用时会遇到条件动态筛选数据的问题，这里我们就需要搭配layui表格重载来实现这个筛选数据的效果。
（1）有条件动态筛选的话，渲染表格时可以不设定数据获取的地址建立出一个空表格，使用第一次数据重载来加载页面初始化数据，动态筛选时再调用一次数据重载的方法就好了

（2）数据重载的方法如下：先获取筛选数据的条件数据，使用reload（）方法进行数据重载，url:‘规定提交数据的路径’，where：{数据名：数据值（数据筛选的条件数据）}，
page：{curr：int值（规定数据重载后从第几页开始显示）}…

将筛选的条件数据传输到控制器后，查询数据时使用linq语句或者lambda表达式对数据进行筛选再返回数据即可。

使用layui渲染数据表格

开发工具与关键技术：JS

作者：李宥良

撰写时间：2019年4月25日

使用layui渲染数据表格

今天教大家用layui渲染数据表格，

快速使用

我先来为大家介绍表格

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括
caption、col、colgroup、thead、tfoot 以及 tbody
元素

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框

正文到了，怎么把表格数据渲染进去呢？咱们下面第三部就是渲染的方法，叫“方法渲染”，layui官网提供的三种渲染方法，在这里不做陈述，方法渲染的优点是：你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显，layui的url默认是“get”请求，我这边是post请求，所以记得加上“method”属性为post,6,容易碰到的问题，按理来说这个时候应该已经可以看到表格数据了，为什么大多数人的表格还是渲染不出来呢？一般是因为你配置后台数据格式

创建一个table实例最简单的方式是，在页面放置一个元素

上面你已经看到了一个简单数据表格的基本样子，你一定迫不及待地想知道它的使用方式

下面我就来教大家

layui有三种初始化渲染方式。但其使用方式并不止那一种。你可按照个人喜好和实际情况灵活使用

第一种 方法渲染 它的机制是用JS方法的配置完成渲染
适用场景：无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可

第二种 自动渲染 它的机制是HTML配置，自动渲染 适用场景：无需写过多 JS，可专注于 HTML 表头部分

第三种 转换静态表格 它的机制是转化一段已有的表格元素 适用场景：无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可

我就教大家使用第一种方法渲染

其实这是“自动化渲染”的手动模式，本质类似，只是“方法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个

我推荐大家采用“方法级渲染”的做法，其最大的优势在于你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。而究竟它与“自动化渲染”的方式谁更简单，也只能由各位猿猿们自行体味了

这个时候表格一般已经是出来了，记得，后台提供的数据格式，和layui提供的一样最好，这一点要切记，这一点大家可以去官网上看下，不做说明

最终效果图

下面是 table 模块的参数一览表

参数 / 类型 / 说明

Elem / String/DOM 、 指定原始 table 容器的选择器或 DOM，方法渲染方式必填

Cols / Array / 设置表头。值是一个二维数组。方法渲染方式必填

url / - / 异步数据接口相关参数。其中 url 参数为必填项

学习前端代码的朋友们应该都有所闻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”的

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

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

==》

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