layui
内置模块
一.数据表格
1.快速使用
- 引入layui.css和layui.js
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ></script>
- 创建一个table实例最简单的方式是，在页面放置一个元素
<table id="demo"></table>，然后通过 table.render() 方法指定该容器。
<table id="demo"></table>
<script type="text/javascript">
//加载table模块
layui.use('table',function(){
var table = layui.table;
//加载table实例
table.render({
elem:"#demo",//elem属性用来绑定容器的id属性值
url:"js/user.json",//数据接口
cols:[[
{field:'id',title:'用户编号',sort:true,width:100},
{field:'username',title:'用户姓名',width:100},
{field:'sex',title:'性别',sort:true,width:100},
{field:'city',title:'城市',width:100},
{field:'sign',title:'签名'},
]],
});
});
</script>
- user.json
{
"code":0,
"msg":"",
"count":50,
"data":[{
"id":10000,
"username":"user-0",
"sex":"女",
"city":"城市-0",
"sign":"签名-0"
},
{
"id":10001,
"username":"user-1",
"sex":"男",
"city":"城市-1",
"sign":"签名-1"
},
{
"id":10002,
"username":"user-2",
"sex":"女",
"city":"城市-2",
"sign":"签名-2"
},
{
"id":10003,
"username":"user-3",
"sex":"女",
"city":"城市-3",
"sign":"签名-3"
},
{
"id":10004,
"username":"user-4",
"sex":"女",
"city":"城市-4",
"sign":"签名-4"
},
{
"id":10005,
"username":"user-5",
"sex":"男",
"city":"城市-5",
"sign":"签名-5"
},
{
"id":10006,
"username":"user-6",
"sex":"女",
"city":"城市-6",
"sign":"签名-6"
},
{
"id":10007,
"username":"user-7",
"sex":"女",
"city":"城市-7",
"sign":"签名-7"
},
{
"id":10008,
"username":"user-8",
"sex":"女",
"city":"城市-8",
"sign":"签名-8"
},
{
"id":10009,
"username":"user-9",
"sex":"男",
"city":"城市-9",
"sign":"签名-9"
},
{
"id":10010,
"username":"user-10",
"sex":"女",
"city":"城市-10",
"sign":"签名-10"
}
]
}
结果展示：
2.三种初始化渲染方式
2.1 方法渲染
- 将基础参数的设定放在了JS代码中，且原始的table标签只需要一个选择器。
<table id="demo"></table>
- 渲染表格
<script type="text/javascript">
//加载table模块
layui.use('table',function(){
var table = layui.table;
//加载table实例
table.render({
elem:"#demo",//elem属性用来绑定容器的id属性值
url:"js/user.json",//数据接口
height:315,//容器高度
page:true,//开启分页
cols:[[//设置表头
{field:'id',title:'用户编号',sort:true,width:100},
{field:'username',title:'用户姓名',width:100},
{field:'sex',title:'性别',sort:true,width:100},
{field:'city',title:'城市',width:100},
{field:'sign',title:'签名'},
]],
});
});
</script>
结果展示：
//方法渲染
//执行渲染
table.render({
elem:"#demo2",//elem属性用来绑定容器的id属性值
url:"js/user.json",//数据接口
height:315,//容器高度
page:true,//开启分页
cols:[[
{field:'id',title:'ID',sort:true,width:100},
{field:'username',title:'用户姓名',width:100},
{field:'sex',title:'性别',sort:true,width:100}
]],
});
});
- table.render()方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作
2.2 自动渲染
- 在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需写初始的渲染方法。
- 带有 class=“layui-table” 的
<table>标签。 - 对标签设置属性 lay-data="" 用于配置一些基础参数
- 在 标签中设置属性lay-data=""用于配置表头信息
<!--
自动渲染
- 带有 class="layui-table" 的 `<table>` 标签。
- 对标签设置属性 lay-data="" 用于配置一些基础参数
- 在 <th> 标签中设置属性lay-data=""用于配置表头信息
-->
<table class="layui-table" lay-data="{url:'js/user.json',page:true}">
<thead>
<tr>
<th lay-data="{field:'id',width:100}">ID</th>
<th lay-data="{field:'username',width:100}">用户名</th>
<th lay-data="{field:'sex',sort: true,width:100}">性别</th>
</tr>
</thead>
</table>
结果展示：
2.3转换静态表格
<!--转换静态表格-->
<table lay-filter="demo3">
<thead>
<tr>
<th lay-data="{field:'username',width:100}">昵称</th>
<th lay-data="{field:'experience',width:80,sort:true}">积分</th>
<th lay-data="{field:'sign',width:300}">签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>邓女士</td>
<td>88</td>
<td>一切都要慢慢来</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
//加载table模块
layui.use('table',function(){
var table = layui.table;
//转换静态表格
table.init('demo3',{
height:315//设置高度
//支持所有基础参数
})
});
</script>
结果展示：
2.4 基础参数适用的场景
- 查看官方文档
2.5 开启分页
<body>
<!--准备容器(标签)，设置id属性值-->
<table id="demo"></table>
<script type="text/javascript">
//加载table模块
layui.use('table',function(){
var table = layui.table;
//加载table实例
table.render({
elem:"#demo",//elem属性用来绑定容器的id属性值
url:"js/user.json",//数据接口
cols:[[
//设置序列号
{field:'aa',type:"numbers"},
//设置复选框
{field:'aa',type:"checkbox"},
{field:'id',title:'用户编号',sort:true,width:100,hide:true},
{field:'username',title:'用户姓名',width:100},
{field:'sex',title:'性别',sort:true,width:100},
{field:'city',title:'城市',width:100},
{field:'sign',title:'签名'},
]],
//开启分页
page:true
});
});
</script>
</body>
结果展示：
2.6 开启头部工具栏,监听头和行工具栏事件，表格重载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据表格</title>
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ></script>
</head>
<body>
<!---->
<div class="demoTable">
搜索ID:
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off" />
</div>
<button class="layui-btn" id="searchBtn">搜索</button>
</div>
<!--准备容器(标签)，设置id属性值-->
<table id="demo" lay-filter="test"></table>
<!--表格工具栏-->
<script type="text/html" id="demo2">
<div class="layui-btn-container">
<!--lay-event给元素绑定事件名-->
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">
获取选中行数据
</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
获取选中数目
</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">
验证是否全选
</button>
</div>
</script>
<!--表头工具栏-->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
//加载table模块
layui.use('table',function(){
var table = layui.table;
var $ = layui.jquery;//获取jquery对象
//加载table实例
table.render({
elem:"#demo",//elem属性用来绑定容器的id属性值
url:"js/user.json",//数据接口
cols:[[
//设置序列号
{field:'aa',type:"numbers"},
//设置复选框
{field:'aa',type:"checkbox"},
{field:'id',title:'用户编号',sort:true,width:100,hide:true,edit:'text'},
{field:'username',title:'用户姓名',width:100,edit:'text'},
{field:'sex',title:'性别',sort:true,width:100,edit:'text'},
{field:'city',title:'城市',width:100,edit:'text'},
{field:'sign',title:'签名',width:100,edit:'text'},
{field:'操作',toolbar:'#barDemo',width:150,edit:'text'}
]],
//开启分页
page:true,
//设置表格工具栏
toolbar: "#demo2"
});
/*
* 头监听时间
* 语法：
* table.on('tool(test)', function(obj){
)};
demo表示的是容器上设置的lay-filter属性值
*/
table.on('toolbar(test)',function(obj){
// console.log(obj);
//obj.config对象中可以获取id属性值，即表示当前容器的id属性值，也就是demo
//获取当前表格被选中记录对象，返回数据
var checkStatus = table.checkStatus(obj.config.id);
console.log(checkStatus);
//获取事件名
var eventName = obj.event;
//判断事件名，执行对应的代码
switch(eventName){
case "getCheckData":
//获取被选中的记录的数组
var arr = checkStatus.data;
//将数组解析成字符串
layer.alert(JSON.stringify(arr));
break;
case "getCheckLength":
//获取被选中的记录的数组
var arr = checkStatus.data;
layer.msg("选中了"+arr.length+"条记录！");
break;
case "isAll":
//通过isAll属性判断是否全选
var flag = checkStatus.isAll;
var str = flag ? '全选' : '未全选';
layer.msg(str);
break;
default:
break;
}
// console.log(event);
});
//监听行工具栏事件
table.on('tool(test)',function(obj){
//先得到当前操作行的相关信息
var tr = obj.data;
console.log(tr);
//得到事件名
var eventName = obj.event;
//判断事件名，执行对应的方法
if(eventName == 'del'){//删除
//确认框
layer.confirm("您确认要删除吗?",function(index){
//删除指定行tr del()
obj.del();
//关闭弹出层(index是当前弹出层的下标)
layer.close(index);
});
}else if(eventName == 'edit'){//编辑
//输入框
layer.prompt({
//表单元素的类型：0-文本框 1-密码框 2-文本域
formType:0,
value:tr.username,//设置输入框的值
},function(value,index){
//修改指定单元格的值
//value表示输入的值
obj.update({
username:value
});
//关闭弹出层
layer.close(index);
});
}
});
//监听单元格编辑事件
//表头设置edit 单元格编辑类型(默认不开启)目前只支持：text(输入框)
table.on('edit(test)',function(obj){
console.log(obj);
//获取修改后的值
var value = obj.value;
//得到当前修改的tr对象
var data = obj.data;
//得到修改的字段名
var field = obj.field;
layer.msg("[ID:"+data.id+"]的"+field+"字段的值修改为："+value);
});
/*
* 给指定元素绑定事件
*/
$(document).on('click','#searchBtn',function(data){
//获取搜索文本框对象
var sreachTxt = $("demoReload");
//调用数据表格的重载方法 table.reload(ID,options)
table.reload('demo',{
where:{//设置需要传递的参数
id:sreach.val(),
name:"zhangsan"
},
page:{
//表示让条件查询从第一页开始 如果未设置则从当前页开始查询，此页前面的所有数据不纳入条件筛选
curr:1//从第一页开始
}
});
});
});
</script>
</body>
</html>
结果展示：
表格数据的官方文档：https://www.layui.com/doc/modules/table.html#methodRender
2904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
