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>
|