<!-- 权限管理 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../../layui/css/layui.css">
<link rel="stylesheet" href="../../css/diy.css">
<style>
.layui-body {
overflow-x: scroll;
}
</style>
</head>
<body>
<div class="section1">
<!-- 内容主体区域 -->
<div class="manu auth" style="padding: 15px;">
<
form class="layui-
form" action="">
<div class="
form-input-box-t layui-
form-item">
<div class="input-box">
<label class="layui-
form-label">权限名</label>
<div class="layui-input-block input-i block">
<input type="text" name="mod_name" required lay-verify="required" autocomplete="off"
class="layui-input"> <!--通过lay-verify="required"实现输入验证，确保必填字段非空-->
</div>
</div>
<div class="input-box">
<!--查询部分-->
<label class="layui-
form-label">用户组</label>
<div class="layui-input-block select block">
<select name="user_group" lay-filter="required" id="user_group">
<option value=""></option>
</select>
</div>
</div>
<div class="input-box">
<label class="layui-
form-label">添加权限</label>
<div class="layui-input-block select block">
<select name="add" lay-filter="required">
<option value=""></option>
<option value="0">无</option>
<option value="1">有</option>
</select>
</div>
</div>
<div class="input-box">
<label class="layui-
form-label">修改权限</label>
<div class="layui-input-block select block">
<select name="set" lay-filter="required">
<option value=""></option>
<option value="0">无</option>
<option value="1">有</option>
</select>
</div>
</div>
<div class="input-box">
<label class="layui-
form-label">删除权限</label>
<div class="layui-input-block select block">
<select name="del" lay-filter="required">
<option value=""></option>
<option value="0">无</option>
<option value="1">有</option>
</select>
</div>
</div>
<div class="input-box">
<label class="layui-
form-label">查询权限</label>
<div class="layui-input-block select block">
<select name="get" lay-filter="required">
<option value=""></option>
<option value="0">无</option>
<option value="1">有</option>
</select>
</div>
</div>
</div>
</
form>
<div class="buts">
<button type="button" class="layui-btn layui-btn-normal" id="inquire"><span>查询</span></button>
<button type="button" class="layui-btn layui-btn-normal" id="reset"><span>重置</span></button>
</div>
<div class="Customize-the-box">
<div class="circle"></div>
<div class="circle"></div>
<div class="card-inner"></div>
</div>
</div>
<h1>数据列表</h1>
<div class="table">
<table class="layui-hide" id="newsClassification" lay-filter="newsClassification"></table>
<
script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-
event="add">修改</button>
</div>
</
script>
</div>
</div>
<
script src="../../layui/layui.
js"></
script>
<
script src="../../
js/axios.min.
js"></
script>
<
script src="../../
js/index.
js"></
script>
<
script src="../../
js/base.
js" charset="utf-8"></
script>
<
script>
var BaseUrl = baseUrl()
layui.use(['element', 'layer', 'util'], function () {
var element = layui.element
, table = layui.table
, layer = layui.layer
, util = layui.util
, $ = layui.$;
let personInfo =
JSON.parse(sessionStorage.personInfo)
let user_group = personInfo.user_group
let token = sessionStorage.token || null
//头部事件
util.
event('lay-header-
event', {
//左侧菜单事件
menuLeft: function (othis) {
layer.msg('展开左侧菜单的操作', {icon: 0});
}
, menuRight: function () {
layer.open({
type: 1
, content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
, area: ['260px', '100%']
, offset: 'rt' //右上角
, anim: 5
, shadeClose: true
});
}
});
// table 事件
table.render({
elem: '#newsClassification'
, toolbar: true
, url: BaseUrl + '/api/auth/get_list'
, headers: {
'x-auth-token': token,
'Content-Type': 'application/
json'
}
,limits: [10]
, page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
, groups: 1 //只显示 1 个连续页码
, first: false //不显示首页
, last: false //不显示尾页
}
, cols: [[
{type: 'checkbox'}
, {field: 'user_group', width: '10%', title: '用户组'}
, {field: 'mod_name', width: '10%', title: '权限名称',
templet: function (d) {
if (d.path.replace('/'+d.table_name+'/','')=='table') {
return "<div>"+d.mod_name+"后台列表</div>"
}
if (d.path.replace('/'+d.table_name+'/','')=='view') {
return "<div>"+d.mod_name+"后台详情</div>"
}
if (d.path.replace('/'+d.table_name+'/','')=='list') {
return "<div>"+d.mod_name+"前台列表</div>"
}
if (d.path.replace('/'+d.table_name+'/','')=='details') {
return "<div>"+d.mod_name+"前台详情</div>"
}
if (d.path.replace('/'+d.table_name+'/','')=='edit') {
return "<div>"+d.mod_name+"前台编辑</div>"
}
}
}
, {
field: 'add', width: '10%', title: '<span>添加</span>权限',
templet: function (d) {
if (d.add == '0') {
return "<div>无</div>"
} else {
return "<div>有</div>"
}
}
}
, {
field: 'del', width: '10%', title: '<span>删除</span>权限',
templet: function (d) {
if (d.del == '0') {
return "<div>无</div>"
} else {
return "<div>有</div>"
}
}
}
, {
field: 'set', width: '10%', title: '修改权限',
templet: function (d) {
if (d.set == '0') {
return "<div>无</div>"
} else {
return "<div>有</div>"
}
}
}
, {
field: 'get', width: '10%', title: '<span>查询</span>权限',
templet: function (d) {
if (d.get == '0') {
return "<div>无</div>"
} else {
return "<div>有</div>"
}
}
}
, {
field: 'create_time',
width: '15%',
title: '新增时间',
sort: true,
templet: "<div>{{layui.util.toDateString(d.create_time, 'yyyy-MM-dd HH:mm:ss')}}</div>"
}
, {
field: 'update_time',
width: '15%',
title: '更新时间',
sort: true,
templet: "<div>{{layui.util.toDateString(d.update_time, 'yyyy-MM-dd HH:mm:ss')}}</div>"
}
, {field: 'operate', title: '操作', toolbar: "#toolbarDemo"}
]]
, page: true,
request: {
limitName: 'size'
},
response: {
statusName: 'code', //规定返回/Back的状态码字段为code
statusCode: 200 //规定成功的状态码味200
},
parseData: function (res) {
return {
"code": 200,
"msg": "",
"count": res.result.count,
"data": res.result.list
}
},
where: {like: 0, size: 10}
});
layui.table.on('tool(newsClassification)', function (obj) { //注：tool是工具条事件名，test是table原始容器的
属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var lay
Event = obj.
event; //获得 lay-
event 对应的值（也可以是表头的
event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的DOM对象
if (lay
Event == "add") {
let auth_id = data.auth_id
// window.location = ('./view.html?' + auth_id)
layopen_dateil('./view.html?' + auth_id)
}
});
// 请求参数：
let request = {like: 0, size: 10, page: 1, mod_name: '', user_group: '',add:'',set:'',del:'',get:'',orderby: 'create_time desc'}
// <span>重置</span>/Reset参数
let resetName = {like: 0, size: 10, page: 1, orderby: 'create_time desc'}
fun('newsClassification', BaseUrl + '/api/auth/del', 'auth_id', request, resetName)
async function get_list_user_group() {
$.ajax({
url: BaseUrl + "/api/user_group/get_list",
type: "get",
async: false,
success: function (data) {
if (data && typeof data === 'string'){
data =
JSON.parse(data);
}
if (data.result) {
// 拿到单选框的父级节点
let select = document.querySelector("#user_group")
let op1 = document.createElement('option')
select.appendChild(op1)
// 收集数据 长度
let count
// 收集数据 数组
let arr = []
count = data.result.count
arr = data.result.list
for (let i = 0; i < arr.length; i++) {
// 创建节点
let op = document.createElement('option')
// 给节点赋值
op.innerHTML = arr[i].name
op.value = arr[i].name
// 新增/Add节点
select.appendChild(op)
layui.
form.render('select')
}
}
}
});
}
get_list_user_group();
});
</
script>
</body>
</html>
逐个分析代码功能，不要自己填写内容
本文详细解释了JavaScript中用于事件绑定的`event`属性、`htmlFor`属性及它们在DOM操作中的应用，通过实例展示了如何使用这些属性实现页面交互。
扫一扫
2524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
