平台网站建设公司哪家好媒体资源网

本节课我们来开始了解 Layui 的内置模块：table 数据表格。
一．基本使用
1. table 模块，通过异步加载数据来渲染表格来展现数据内容；
<table id="table"></table>
layui.use(['table'], () => {
const table = layui.table
//数据表格
table.render({
elem : '#table',
url : 'https://www.liyanhui.com/test/data.php',
height : 312,
page : true,
cols : [[
{
field : 'id',
title : 'ID',
width : 80,
sort : true,
}
...
})
}
PS：官网提供的数据接口，本地直接用会出现跨域，我用自己服务器做了代理使用；
2. 渲染方式有三种：JS 方式(推荐，上面的例子就是)、自动渲染和转换静态表格；
3. 对于自动渲染和静态表格的转换，直接看官网的例子即可，比较简单，不做演示；

本节课我们来开始了解 Layui 的内置模块：table 数据表格。
一．参数说明
1. 参数分为两种：基础参数(表格整体的设置)、表头参数(cols 的设置)；
2. 这里，列举最常用的演示，其它对照手册进行自行了解即可；
常用基础参数
属性 说明
elem 绑定该表格，比如：'#table'
cols 设置标头
width 表格长度
height 表格宽度
page 开启分页，默认 false。或者引入一个分页对象。
limit 每页多少条，默认 10 条
limits 每页条数选项：[10, 20, 30, 40]
loading 是否显示加载 loading，默认 true
toolbar 是否开启右侧顶端工具条，默认 false，更多设置看手册
cols 参数
属性 说明
field 字段名
title 设置标题
width 列长度
minWidth 默认 60，最小长度
type 类型：normal(默认)、checkbox、radio、numbers、space
fixed 固定列，left(true)、false
hide 默认 false，隐藏列
sort 默认 false，开启排序
edit 默认不开启，可设置：text
event 自定义点击事件
style 自定义单元格样式
align 默认 left，其它：center、right
colspan 占用的单元格列数，一般表头
rowpsan 占用的单元格行数，一般表头
异步数据接口参数
属性 说明
url 接口地址，默认传递?page=1&limit=30
method http 请求，默认 get
headers 设置标头
contenType 内容编码
where 其它请求参数
parseData 数据格式解析的回调函数，方便转换成可识别的 json
request 可以更改请求时 page 和 limit 名称
response 重新定义数据格式
PS：剩下一些版本新增或非常用属性，可以对照手册参考