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