Layui的表格

Layui的表格

开发工具与关键技术:
作者:张贵晓
撰写时间:2019.4.26
代码来源于 Layui的表格
Layui用于表格的渲染方法,
Var table = layui.table 先声明一个变量
//执行渲染
table.render({
elem: ‘#demo’ //指定原始表格元素选择器(推荐id选择器)
,height: 315 //容器高度
,cols: [{}] //设置表头
//更多参数参考右侧目录:基本参数选项
});
这是数据表格的属性,和渲染方法
下面的是表格的设计表格头部的设计,
带有 class=“layui-table” 的

标签。
对标签设置属性 lay-data="" 用于配置一些基础参数
标签中设置属性lay-data=""用于配置表头信息

<table class="layui-table"  
lay-data="{height:315,
 url:'/demo/table/user/', 
page:true, id:'test'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:80, sort: true}">ID</th>
<th lay-data="{field:'username', width:80}">用户名</th>
<th lay-data="{field:'sex', width:80, sort: true}">性别</th>
<th lay-data="{field:'city'}">城市</th>
<th lay-data="{field:'sign'}">签名</th>
<th lay-data="{field:'experience', sort: true}">积分</th>
<th lay-data="{field:'score', sort: true}">评分</th>
<th lay-data="{field:'classify'}">职业</th>
<th lay-data="{field:'wealth', sort: true}">财富</th>
</tr>
</thead>
</table>

上面的代码是一个表格的头部设计

猜你喜欢

转载自blog.csdn.net/weixin_44540111/article/details/89518954