140 lines
3.9 KiB
HTML
140 lines
3.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>数据表格</title>
|
|||
|
|
<link href="../../../assets/css/pearone.css" rel="stylesheet" />
|
|||
|
|
<link href="../../../component/layui/css/layui.css" rel="stylesheet" />
|
|||
|
|
<link href="../../../component/font-awesome/css/font-awesome.css" rel="stylesheet" />
|
|||
|
|
<link href="../../../admin/css/pearButton.css" rel="stylesheet"/>
|
|||
|
|
<link href="../../../admin/css/pearTable.css" rel="stylesheet"/>
|
|||
|
|
<style>
|
|||
|
|
body{
|
|||
|
|
margin:10px;
|
|||
|
|
background: whitesmoke;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="layui-card">
|
|||
|
|
<div class="layui-card-header">数据表格封装</div>
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
|
|||
|
|
<table class="layui-hide" id="demo" lay-filter="test"></table>
|
|||
|
|
|
|||
|
|
<script type="text/html" id="barDemo">
|
|||
|
|
<a class="pear-btn pear-btn-sm" lay-event="detail">查看</a>
|
|||
|
|
<a class="pear-btn pear-btn-primary pear-btn-sm" plain lay-event="edit">编辑</a>
|
|||
|
|
<a class="pear-btn pear-btn-danger pear-btn-sm" plain lay-event="del">删除</a>
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="../../../component/layui/layui.js"></script>
|
|||
|
|
<script>
|
|||
|
|
layui.config({
|
|||
|
|
version: '1575404972583' //为了更新 js 缓存，可忽略
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider','jquery'], function() {
|
|||
|
|
var laydate = layui.laydate //日期
|
|||
|
|
,laypage = layui.laypage //分页
|
|||
|
|
,layer = layui.layer //弹层
|
|||
|
|
,table = layui.table //表格
|
|||
|
|
,carousel = layui.carousel //轮播
|
|||
|
|
,upload = layui.upload //上传
|
|||
|
|
,element = layui.element //元素操作
|
|||
|
|
,slider = layui.slider //滑块
|
|||
|
|
,$ = layui.jquery //jquery
|
|||
|
|
|
|||
|
|
|
|||
|
|
//执行一个 table 实例
|
|||
|
|
table.render({
|
|||
|
|
elem: '#demo',
|
|||
|
|
url: '../../../admin/data/table.json' //数据接口
|
|||
|
|
,title: '用户表'
|
|||
|
|
,page: true //开启分页
|
|||
|
|
,toolbar: "default" //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
|
|||
|
|
,totalRow: false //开启合计行
|
|||
|
|
,cols: [
|
|||
|
|
[ //表头
|
|||
|
|
{
|
|||
|
|
type: 'checkbox',
|
|||
|
|
fixed: 'left'
|
|||
|
|
}, {
|
|||
|
|
field: 'id',
|
|||
|
|
title: 'ID',
|
|||
|
|
width: 80,
|
|||
|
|
sort: true,
|
|||
|
|
fixed: 'left',
|
|||
|
|
totalRowText: '合计：'
|
|||
|
|
}, {
|
|||
|
|
field: 'username',
|
|||
|
|
title: '用户名'
|
|||
|
|
}, {
|
|||
|
|
field: 'experience',
|
|||
|
|
title: '积分'
|
|||
|
|
}, {
|
|||
|
|
fixed: 'right',
|
|||
|
|
width: 220,
|
|||
|
|
align: 'center',
|
|||
|
|
toolbar: '#barDemo'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//监听头工具栏事件
|
|||
|
|
table.on('toolbar(test)', function(obj) {
|
|||
|
|
var checkStatus = table.checkStatus(obj.config.id),
|
|||
|
|
data = checkStatus.data; //获取选中的数据
|
|||
|
|
switch (obj.event) {
|
|||
|
|
case 'add':
|
|||
|
|
layer.msg('添加');
|
|||
|
|
break;
|
|||
|
|
case 'update':
|
|||
|
|
if (data.length === 0) {
|
|||
|
|
layer.msg('请选择一行');
|
|||
|
|
} else if (data.length > 1) {
|
|||
|
|
layer.msg('只能同时编辑一个');
|
|||
|
|
} else {
|
|||
|
|
layer.alert('编辑 [id]：' + checkStatus.data[0].id);
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'delete':
|
|||
|
|
if (data.length === 0) {
|
|||
|
|
layer.msg('请选择一行');
|
|||
|
|
} else {
|
|||
|
|
layer.msg('删除');
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//监听行工具事件
|
|||
|
|
table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
|
|||
|
|
var data = obj.data //获得当前行数据
|
|||
|
|
,
|
|||
|
|
layEvent = obj.event; //获得 lay-event 对应的值
|
|||
|
|
if (layEvent === 'detail') {
|
|||
|
|
layer.msg('查看操作');
|
|||
|
|
} else if (layEvent === 'del') {
|
|||
|
|
layer.confirm('真的删除行么', function(index) {
|
|||
|
|
obj.del(); //删除对应行（tr）的DOM结构
|
|||
|
|
layer.close(index);
|
|||
|
|
//向服务端发送删除指令
|
|||
|
|
});
|
|||
|
|
} else if (layEvent === 'edit') {
|
|||
|
|
layer.msg('编辑操作');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|