168 lines
4.9 KiB
HTML
168 lines
4.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" />
|
|||
|
|
<style>
|
|||
|
|
body{
|
|||
|
|
margin:10px;
|
|||
|
|
background: lightgray;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="layui-card">
|
|||
|
|
<div class="layui-card-header">数据表格封装</div>
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
<blockquote class="layui-elem-quote">
|
|||
|
|
<form class="layui-form">
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<div class="layui-input-inline">
|
|||
|
|
<input type="text" class="layui-input" id="searchVal" name="searchVal" placeholder="请输入搜索的内容" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<button type="button" class="layui-btn" id="search_btn">搜索</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<button type="reset" class="layui-btn layui-btn-danger">重置</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</blockquote>
|
|||
|
|
<table class="layui-hide" id="demo" lay-filter="test"></table>
|
|||
|
|
|
|||
|
|
<script type="text/html" id="barDemo">
|
|||
|
|
<a class="layui-btn layui-btn-primary 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>
|
|||
|
|
|
|||
|
|
</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: '../../api/table.json' //数据接口
|
|||
|
|
,title: '用户表'
|
|||
|
|
,page: true //开启分页
|
|||
|
|
,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
|
|||
|
|
,totalRow: true //开启合计行
|
|||
|
|
,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: 165,
|
|||
|
|
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('编辑操作');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//搜索演示【因为需要后台配合，所说义暂时看不到实际搜索效果，network可查看请求参数】
|
|||
|
|
$("#search_btn").on("click",function(){
|
|||
|
|
// 这里仅仅为了演示效果，具体实现结合需求自行更改
|
|||
|
|
if($("#searchVal").val() != ''){
|
|||
|
|
table.reload("demo",{
|
|||
|
|
page: {
|
|||
|
|
curr: 1 //重新从第 1 页开始
|
|||
|
|
},
|
|||
|
|
where: {
|
|||
|
|
key: $("#searchVal").val() //搜索的关键字
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}else{
|
|||
|
|
layer.msg("请输入搜索的内容");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|