<!
-- 权限管理
-->
<!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: 1
5px;">
<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: 1
5px;">处理右侧面板的操作</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: '1
5%',
title: '新增时间',
sort: true,
templet: "<div>{{layui.util.toDateString(d.create_time, 'yyyy
-MM
-dd HH:mm:ss')}}</div>"
}
, {
field: 'update_time',
width: '1
5%',
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 layEvent = obj.event; //获得 lay
-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的DOM对象
if (layEvent == "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.inner
HTML = arr[i].name
op.value = arr[i].name
// 新增/Add节点
select.appendChild(op)
layui.form.render('select')
}
}
}
});
}
get_list_user_group();
});
</script>
</body>
</
html>
分析以上代码，哪个代码对应哪个功能就行，不要自己拓展
本文详细介绍了HTML中<area>标签的使用方法，包括如何定义图像映射中的不同形状区域及其坐标设置，适用于创建交互式的图像链接。
扫一扫
851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
