ok-admin框架，第三天用户列表

效果图片：

@{
ViewBag.Title = "员工列表";
Layout = null;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/css/oksub.css">
<script type="text/javascript" src="/lib/loading/okLoading.js"></script>
<script src="~/Scripts/jquery-3.4.1.js"></script>
</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" name="username">

</form>
</div>

<table class="layui-hide" id="tableId_user" lay-filter="tableFilter"></table>
</div>

<script src="/lib/layui/layui.js"></script>
<script>
layui.use(["element", "table", "form", "laydate", "okLayer", "okUtils", "okMock"], function () {
let table = layui.table;
let form = layui.form;
let laydate = layui.laydate;
let okLayer = layui.okLayer;
let okUtils = layui.okUtils;
okLoading.close();
let userTable = table.render({
elem: "#tableId_user",
url: "/UserList/LoadPageList",
limit: 10,
page: true,
toolbar: "#toolbarTpl",
size: "sm",
cols: [[
{ type: "checkbox" },
{ field: "username", title: "用户名" },
{ field: "Realname", title: "姓名" },
{ field: "phone", title: "手机号码" },
{ field: "departName", title: "部门" },
{ field: "createtime", title: "创建时间", width: 150 },
{ title: "操作", width: 80, align: "center", templet: "#operationTpl" }
]],
done: function (res, curr, count) {
console.log(res, curr, count);
//列表页面加载后再请求页面的按钮权限
//$.ajax({
// url: '/UserList/UserButtonRole',
// type: 'get',
// async: false,
// success: function (data) {
// console.log("用户列表按钮权限data:" + data);

//var layevent = $('a').attr('lay-event');

//if (data.indexOf("新增") > -1) {

// $(".layui-btn-container").show();
//}
//if (data.indexOf("编辑") > -1) {
// $(".div_edit").show();
//}
//if (data.indexOf("查询") > -1) {

// $("#button_cx").show();
//}
//if (data.indexOf("删除") > -1) {
// $(".div_delete").show();
//}

// }
//})
}
});

form.on("submit(search)", function (data) {

userTable.reload({
where: data.field,
page: { curr: 1 }
});
return false;
});

table.on("toolbar(tableFilter)", function (obj) {
switch (obj.event) {
case "add":
add();
break;
case "batchDel":
batchDel();
break;
}
});

table.on("tool(tableFilter)", function (obj) {
let data = obj.data;
switch (obj.event) {
case "edit":
edit(data.id);
break;
case "del":
del(data.id);
break;
}
});

function add() {
okLayer.open("添加用户", "/UserList/Add", "90%", "90%", null, function () {
userTable.reload();
})
}
function edit(id) {
okLayer.open("编辑用户", "/UserList/Update?id=" + id, "90%", "90%", null, function () {
userTable.reload();
})
}

function del(id) {
okLayer.confirm("确定要删除吗？", function () {
okUtils.ajax("/UserList/Delete", "post", { idsStr: id }, true).done(function (response) {
okUtils.tableSuccessMsg(response.msg);
}).fail(function (error) {
console.log(error)
});
})
}
})</script>

<script type="text/html" id="toolbarTpl">
<div class="layui-btn-container">
<div class="layui-inline" lay-event="add" ><i class="layui-icon layui-icon-add-1"></i></div>
</div>
</script>
<script type="text/html" id="operationTpl">

</script>
</body>
</html>
<style type="text/css">
.div_edit{

}
.div_delete {
}
</style>

posted @ 2022-05-22 10:01 .net&new 阅读(127) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

ok-admin框架，第三天用户列表

公告