本文档展示了如何在网页中使用LayUI框架来实现数据表格的创建、数据操作、工具栏事件以及弹出层功能。通过引入layui.css和layui.js，配置表格参数，加载json数据，实现了数据的展示、编辑、删除等操作。同时，通过监听事件处理用户交互，包括获取选中数据、触发自定义头部工具栏事件和行工具条事件。此外，还演示了弹出层的使用，包括信息提示、确认对话框以及自定义内容的页面层。
1，下载layui文件
将layui加载到js文件中
在示例中找到数据表格--数据操作 有相同的案例
2,内置模块-->创建一个student.json里面存放
{
"code": 0,
"msg": "",
"count": 1000,
"data": [{
"id":1,
"name":"张三",
"username":"zhangsan",
"password":"123456",
"sex":"男",
"age":20,
"birthday":"2001-03-10",
"createTime":"2021-08-31 16:32:10"
}, {}]}
2 ,导入模块，多个，隔开['layer', 'table', 'form']
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入layui.css -->
<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" />
</head>
<body>
<table id="stu" lay-filter="student"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<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="detail">查看</a>
<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>
<!-- 导入layui.js -->
<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
layui.use(['layer', 'table', 'form'], function() {
var layer = layui.layer;
var table = layui.table;
var form = layui.form;
//调用组件的render方法，渲染组件对象，返回该表格对象
var tableIns = table.render({
elem: "#stu", //渲染的dom选择器
url: "student.json", //数据请求地址，异步请求
toolbar: "#toolbarDemo", //指向自定义工具栏模板选择器
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示1' //标题
,
layEvent: 'LAYTABLE_TIPS1' //事件名，用于 toolbar 事件中使用
,
icon: 'layui-icon-tips' //图标类名
}, {
title: '提示2' //标题
,
layEvent: 'LAYTABLE_TIPS2' //事件名，用于 toolbar 事件中使用
,
icon: 'layui-icon-tips' //图标类名
}],
page: true, //开启分页栏
totalRow: true, //开启合计行区域
limit: 20, //每页显示的记录条数
limits: [5, 10, 15, 20], //每页条数的选择项
title: "学生表", //定义 table 的大标题（在文件导出等地方会用到）
text: {
none: '暂无相关数据' //默认：无数据。
},
autoSort: true, //禁用前端自动排序，默认是true,一般是服务器排好序前端显示就行了，所以建议禁止
initSort: {
field: 'age' //排序字段，对应 cols 设定的各字段名
,
type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
},
even: true,
cols: [
[{
type: "radio", //复选框
fixed: "left" //列固定在左侧
},
{
field: "id", //从数据中获取字段属性名id
title: "编号", //列的名称
totalRowText: '合计' //显示自定义的合计文本
},
{
field: "name",
title: "姓名",
unresize: true //类的宽度不能改变大小
},
{
field: "username",
title: "用户名",
edit: "text" //列内容可编辑，目前仅支持文本
},
{
field: "password",
title: "密码",
hide: true //隐藏该列
},
{
field: "sex",
title: "性别",
align: "center", //内容居中对齐，默认是left
templet: function(d) { //对列的内容进行格式化，回调函数中d指的是当前行数据对象
return d.sex == 1 ? "男" : "女"; //返回格式化之后的内容进行显示
}
},
{
field: "age",
title: "年龄",
totalRow: true, //统计列字段值总和，必须是表格属性totalRow为true才生效
sort: true, //表格属性autoSort必须是为true才生效
templet: function(d) {
if (d.age < 18) {
return "<span style='color:red;font-weight:bold;'>" + d.age + "</span>"
} else {
return d.age;
}
}
},
{
field: "birthday",
title: "出生日期"
},
{
field: "createTime",
title: "创建时间"
},
{
title: "操作",
fixed: 'right',
toolbar: '#barDemo'
}
]
],
done: function(res, curr, count) { //表格数据渲染完的回调
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
console.log(res);
//得到当前页码
console.log(curr);
//得到数据总量
console.log(count);
}
});
//触发头部工具栏事件toolbar，作用在lay-filter="student"的表格
table.on('toolbar(student)', function(obj) {
//获取表格选中的行对象
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) { //获取头部工具栏中按钮元素lay-event属性值
case 'getCheckData':
layer.alert(JSON.stringify(checkStatus.data));
break;
case 'getCheckLength':
layer.msg("当前选中" + checkStatus.data.length + "条记录");
break;
case 'isAll':
layer.msg(checkStatus.isAll ? "全选" : "未全选");
break;
case 'LAYTABLE_TIPS1':
layer.msg("LAYTABLE_TIPS1");
break;
case 'LAYTABLE_TIPS2':
layer.msg("LAYTABLE_TIPS2");
break;
};
});
//表格行工具条事件
table.on('tool(student)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if (layEvent === 'detail') { //查看
//do somehing
layer.alert(JSON.stringify(data));
} else if (layEvent === 'del') { //删除
layer.confirm('真的删除行么', function(index) {
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if (layEvent === 'edit') { //编辑
//do something
//同步更新缓存对应的值
obj.update({
username: '123',
title: 'xxx'
});
} else if (layEvent === 'LAYTABLE_TIPS') {
layer.alert('Hi，头部工具栏扩展的右侧图标。');
}
});
//触发行单击事件
table.on('row(student)', function(obj){
console.log(obj.tr) //得到当前行元素对象
console.log(obj.data) //得到当前行数据
//obj.del(); //删除当前行
//obj.update(fields) //修改当前行数据
});
//触发行双击事件
table.on('rowDouble(student)', function(obj){
//obj 同上
obj.del(); //删除当前行
});
//复选框监听事件
table.on('checkbox(student)', function(obj){
console.log(obj); //当前行的一些常用操作集合
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});
//单选框监听事件
table.on('radio(student)', function(obj){ //student 是 table 标签对应的 lay-filter 属性
console.log(obj); //当前行的一些常用操作集合
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
});
//单元格编辑事件
table.on('edit(student)', function(obj){ //注：edit是固定事件名，student是table原始容器的属性 lay-filter="对应的值"
console.log(obj.value); //得到修改后的值
console.log(obj.field); //当前编辑的字段名
console.log(obj.data); //所在行的所有相关数据
});
//触发排序事件
table.on('sort(student)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
console.log(obj.field); //当前排序的字段名
console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
console.log(this); //当前排序的 th 对象
//尽管我们的 table 自带排序功能，但并没有请求服务端。
//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
table.reload('tableIns', {
initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
field: obj.field //排序字段
,order: obj.type //排序方式
}
});
layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
});
});
</script>
</body>
</html>
2，弹出层
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹出层</title>
<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
</head>
<body>
<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
layui.use(['layer','jquery'],function(){
var layer = layui.layer;
var jquery = layui.jquery;
// layer.msg('你回家');
layer.alert("许大夫",{icon: 4});
//消息确认框
/* layer.confirm("确认删除吗？",{icon: 0, title:'提示'},function(){
layer.alert("删除成功");
}); */
/* //消息输入框
layer.prompt({
formType: 2,
title: '请输入姓名',
value: '张三',
area: ['800px', '350px']
});
//页面层
layer.open({
type: 1,
content:("#pp") //这里的content是一个DOM，最好该元素要存放在body最外层，否则可能被其它的相对
}); */
/* layer.open({
type: 1,
content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
type: 2, //iframe嵌入其他地址的内容到窗口显示
content: "test1.html" //这里content是一个普通的String
}); */
});
</script>
<div id="pp">
dfjofjai;d
</div>
</body>
</html>
3447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
