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