<!DOCTYPE html>
<html>
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - 桌面</title>
<link rel="stylesheet" href="../res/layui/css/layui.css">
<link rel="stylesheet" href="../res/css/main.css">
</head>
<body>
<blockquote class="layui-elem-quote layui-table-tools">
<div class="fl">
<button class="layui-btn layui-btn-danger" id="btn-del">批量删除</button>
<button class="layui-btn" id="btn-add">添加</button>
</div>
<div class="fr">
<span class="layui-form-label">搜索条件：</span>
<div class="layui-input-inline">
<input type="text" autocomplete="off" placeholder="请输入搜索条件" class="layui-input">
</div>
<button class="layui-btn mgl-20">查询</button>
<button class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">ဂ</i></button>
</div>
</blockquote>
<!-- 数据表格 -->
<table class="layui-table" id="demo" lay-filter="demotable" lay-data="{id:'test', url:'data.json',height:'full-80', even:true, page:true ,limits: [15, 30, 50]}">
<thead>
<tr>
<th lay-data="{checkbox:true}"></th>
<th lay-data="{field:'id', width:80, sort: true}">ID</th>
<th lay-data="{field:'username', width:80}">用户名</th>
<th lay-data="{field:'sex', width:80, sort: true}">性别</th>
<th lay-data="{field:'city', width:80}">城市</th>
<th lay-data="{field:'sign', width:177}">签名</th>
<th lay-data="{field:'experience', width:80, sort: true}">积分</th>
<th lay-data="{field:'score', width:80, sort: true}">评分</th>
<th lay-data="{field:'classify', width:80}">职业</th>
<th lay-data="{field:'wealth', width:135, sort: true}">财富</th>
<th lay-data="{fixed: 'right', width:200, align:'center', toolbar: '#tablebar'}">操作</th>
</tr>
</thead>
</table>
<!-- 工具条 -->
<script type="text/html" id="tablebar">
<a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>
<script src="../res/layui/layui.js"></script>
<script src="../res/js/base.js"></script>
<script>
layui.use(['element','form','table','laypage','laytpl','layer'], function () {
var $ = layui.$, //jquery
element = layui.element, //元素操作
form = layui.form, //表单
table = layui.table, //数据表格
laypage = layui.laypage, //分页
laytpl = layui.laytpl, //模板引擎
layer = layui.layer; //弹出层
// //数据绑定
// var tableIns = table.render({
// elem: '#demo'
// , method: 'post'
// , url: 'data.json'
// , height: 'full-80'
// , cols: [[
// { checkbox: true }
// , { field: 'id', title: 'ID', width: 80, sort: true }
// , { field: 'username', title: '用户名', width: 120 }
// , { field: 'sex', title: '性别', width: 80, sort: true }
// , { field: 'city', title: '城市', width: 80 }
// , { field: 'sign', title: '签名', width: 177 }
// , { field: 'experience', title: '积分', width: 80, sort: true }
// , { field: 'score', title: '评分', width: 80, sort: true }
// , { field: 'classify', title: '职业', width: 80 }
// , { field: 'wealth', title: '财富', width: 135, sort: true }
// , { fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#tablebar' }
// ]]
// , skin: 'row' //表格风格
// , even: true
// , page: true //是否显示分页
// , limits: [5, 7, 10]
// , limit: 5 //每页默认显示的数量
// });
//监听工具条
table.on('tool(demotable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值
var tr = obj.tr; //获得当前行 tr 的DOM对象
if (layEvent === 'detail') { //查看
//do somehing
} else if (layEvent === 'del') { //删除
layer.confirm('你确认要删除吗？', function (index) {
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if (layEvent === 'edit') { //编辑
//do something
//同步更新缓存对应的值
obj.update({
username: '123'
, title: 'xxx'
});
}
});
// 刷新
$('#btn-refresh').on('click', function () {
table.reload('test');
});
$("#btn-add").click(function (event) {
Dialog.Open('预览', 'http://www.wdphp.com', '600', '500');
});
$("#btn-del").click(function (event) {
Dialog.Confirm("你确认要删除吗？", "http://www.wdphp.com", { id: 1 });
});
});
</script>
</body>
</html>