116 lines
4.2 KiB
HTML
116 lines
4.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>bsgrid</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
|
|
<link rel="stylesheet" href="../../css/oksub.css">
|
||
|
|
<link rel="stylesheet" href="../../lib/jquery.bsgrid/builds/merged/bsgrid.all.min.css">
|
||
|
|
<style>
|
||
|
|
#bsgrid {
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="ok-body">
|
||
|
|
<!--模糊搜索区域-->
|
||
|
|
<div class="layui-row">
|
||
|
|
<form class="layui-form layui-col-md12 ok-search">
|
||
|
|
<input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime" name="startTime">
|
||
|
|
<input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
|
||
|
|
<input class="layui-input" placeholder="账号" autocomplete="off" name="username">
|
||
|
|
<button class="layui-btn" lay-submit="" lay-filter="search">
|
||
|
|
<i class="layui-icon"></i>
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<!--数据表格-->
|
||
|
|
<table id="bsgrid">
|
||
|
|
<tr>
|
||
|
|
<th w_index="id" w_check="true"></th>
|
||
|
|
<th w_index="id">ID</th>
|
||
|
|
<th w_index="username" w_align="left">账号</th>
|
||
|
|
<th w_index="password" w_align="left">密码</th>
|
||
|
|
<th w_index="nickname">昵称</th>
|
||
|
|
<th w_index="name">姓名</th>
|
||
|
|
<th w_index="role" w_render="roleFmt" w_align="left">角色</th>
|
||
|
|
<th w_index="status" w_render="statusFmt">状态</th>
|
||
|
|
<th w_index="email" w_align="left">邮箱</th>
|
||
|
|
<th w_index="phone">手机</th>
|
||
|
|
<th w_index="createTime">创建时间</th>
|
||
|
|
<th w_index="updateTime">修改时间</th>
|
||
|
|
<th w_render="toolbar" w_align="center">工具栏</th>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<!--js逻辑-->
|
||
|
|
<script src="../../lib/layui/layui.js"></script>
|
||
|
|
<script src="../../lib/jquery.bsgrid/plugins/jquery-1.4.4.min.js"></script>
|
||
|
|
<script src="../../lib/jquery.bsgrid/builds/js/lang/grid.zh-CN.min.js"></script>
|
||
|
|
<script src="../../lib/jquery.bsgrid/builds/merged/bsgrid.all.min.js"></script>
|
||
|
|
<script>
|
||
|
|
layui.use(["element", "util", "form", "laydate", "okMock", "okUtils"], function () {
|
||
|
|
let util = layui.util;
|
||
|
|
let okMock = layui.okMock;
|
||
|
|
let form = layui.form;
|
||
|
|
let laydate = layui.laydate;
|
||
|
|
|
||
|
|
util.fixbar({});
|
||
|
|
|
||
|
|
laydate.render({elem: "#startTime", type: "datetime"});
|
||
|
|
laydate.render({elem: "#endTime", type: "datetime"});
|
||
|
|
|
||
|
|
let gridObj = $.fn.bsgrid.init("bsgrid", {
|
||
|
|
url: okMock.api.bsgrid,
|
||
|
|
pageSizeSelect: true,
|
||
|
|
pageSize: 20,
|
||
|
|
rowHoverColor: true,
|
||
|
|
complete: function () {
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
form.on("submit(search)", function (data) {
|
||
|
|
gridObj.search(data.field);
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function roleFmt(row) {
|
||
|
|
let role = row.role;
|
||
|
|
if (role == 0) {
|
||
|
|
return "超级会员";
|
||
|
|
} else if (role == 1) {
|
||
|
|
return "普通用户";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function statusFmt(row) {
|
||
|
|
let status = row.status;
|
||
|
|
if (status == 0) {
|
||
|
|
return "已启用";
|
||
|
|
} else if (status == 1) {
|
||
|
|
return "已停用";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function toolbar(row) {
|
||
|
|
let id = row.id;
|
||
|
|
let html = "";
|
||
|
|
html += '<a title="编辑" href="javascript:;" onclick="updateUser(\'' + id + '\')"><span class="ok-icon"></span></a>';
|
||
|
|
html += '<a title="删除" href="javascript:;" onclick="deleteUser(\'' + id + '\')"><span class="ok-icon"></span></a>';
|
||
|
|
return html;
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateUser(id) {
|
||
|
|
alert("updateUser id=" + id);
|
||
|
|
}
|
||
|
|
|
||
|
|
function deleteUser(id) {
|
||
|
|
alert("deleteUser id=" + id);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|