我现在就负责把管理员模块前端完善好，你告诉我我怎么做，以下是我现有的管理员模块代码addminadd
.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
管理员管理
</title>
<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">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="lib/loading/okLoading
.js"></script>
<link rel="stylesheet" href="css/main
.css" media="all">
</head>
<style>
.imgs{display: none;}
.picture{display: none;}
</style>
<body>
<div class="x-body">
<form class="layui-form" id="adminadd">
<input type="hidden" name="id" value="">
<div class="layui-form-item">
<label for="username" class="layui-form-label">
<span class="x-red">*</span>登录名
</label>
<div class="layui-input-inline">
<input type="text" id="name" name="name" required="" lay-verify="required"
autocomplete="off" class="layui-input" value="">
</div>
<div class="layui-form-mid layui-word-aux">
<span class="x-red">*</span>将会成为您唯一的登入名
</div>
</div>
<div class="layui-form-item">
<label for="phone" class="layui-form-label">
<span class="x-red">*</span>手机
</label>
<div class="layui-input-inline">
<input type="text" id="phone" name="phone" required="" lay-verify="phone"
autocomplete="off" class="layui-input" value="">
</div>
<div class="layui-form-mid layui-word-aux">
<span class="x-red">*</span>将会成为您唯一的登入名
</div>
</div>
<div class="layui-form-item">
<label for="role" class="layui-form-label">
<span class="x-red">*</span>用户组
</label>
<div class="layui-input-inline">
<select name="group_id">
<option value="">请选择角色</option>
<option value="1" >超级管理员</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label for="link" class="layui-form-label">
<span class="x-red">*</span>缩略图
</label>
<div class="layui-input-inline">
<div class="site-demo-upbar">
<div class=" layui-upload-button" style="border:#FFFFFF ;">
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>上传图片
</button>
<input class="layui-upload" type="file" accept="undefined" id="previewImg" name="img" onchange="upload(this,)">
</div>
</div>
</div>
<a href="javascript:;" style="" class="layui-btn " id="cancel"><i class="layui-icon">ဂ</i>撤销上传</a>
</div>
<div class="layui-form-item imgs" id="imgshow">
<label class="layui-form-label">缩略图展示
</label>
<img src="" id="pimages" name="pimages" style="width: 4
00px;height: 2
00px;"/>
<input id="avatar" name="image" required="" type="hidden" value="">
</div>
<div class="layui-form-item">
<label for="L_pass" class="layui-form-label">
<span class="x-red">*</span>密码
</label>
<div class="layui-input-inline">
<input type="password" id="L_pass" name="password" required="" lay-verify="pass"
autocomplete="off" class="layui-input" value="">
</div>
<div class="layui-form-mid layui-word-aux">
6到16个字符
</div>
</div>
<div class="layui-form-item">
<label for="L_repass" class="layui-form-label">
<span class="x-red">*</span>确认密码
</label>
<div class="layui-input-inline">
<input type="password" id="L_repass" name="repass" required="" lay-verify="repass"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="启用" checked="checked">
<div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon layui-anim-scaleSpring"></i>
<div>启用</div>
</div>
<input type="radio" name="status" value="
0" title="禁用" checked="checked">
<div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
<div>禁用</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label for="L_repass" class="layui-form-label">
</label>
<button class="layui-btn" lay-filter="add" lay-submit="">
增加
</button>
</div>
</form>
</div>
<script src="lib/layui/layui
.js" charset="utf-8">
</script>
<script src="js/x-layui
.js" charset="utf-8">
</script>
<script>
layui
.use([&#
39;form&#
39;,&#
39;layer&#
39;], function(){
$ = layui
.jquery;
var form = layui
.form()
,layer = layui
.layer;
okLoading
.close($);
//自定义验证规则
/*form
.verify({
nikename: function(value){
if(value
.length < 5){
return &#
39;昵称至少得5个字符啊&#
39;;
}
}
,pass: [/(
.+){6,12}$/, &#
39;密码必须6到12位&#
39;]
,repass: function(value){
if($(&#
39;#L_pass&#
39;)
.val()!=$(&#
39;#L_repass&#
39;)
.val()){
return &#
39;两次密码不一致&#
39;;
}
}
});*/
//监听提交
form
.on(&#
39;submit(add)&#
39;, function(data){
var admindate=$("#adminadd")
.serialize();
//var data = data
.field;
$
.ajax({
type:&#
39;post&#
39;,
url:"xxx",
data:admindate,
datatype:"json",
success:function (data) {
if(data
.status==1){
layer
.msg(data
.info,{icon:1,time:1
000});
setTimeout(function(){
window
.parent
.location
.reload();
var index = parent
.layer
.getFrameIndex(window
.name);
parent
.layer
.close(index);
},1
000);
return false;
}else{
layer
.msg(data
.info,{icon:5,time:2
000});return false;
}
}
})
return false;
});
});
</script>
<script>
//轮播图上传
function upload(obj,id)
{
var formData = new FormData();
formData
.append(&#
39;img&#
39;, $(&#
39;#previewImg&#
39;)[
0]
.files[
0]);
formData
.append(&#
39;id&#
39;, id);//将id追加再id中
layer
.msg(&#
39;图片上传中&#
39;, {icon: 16});
$
.ajax({
type:"post",
processData: false,
contentType: false,
url:"xxx",
data:formData,
success:function(data){
if(data
.status == 1){
//console
.log(data
.image_name);
layer
.closeAll(&#
39;loading&#
39;);
//layer
.msg(data
.info,{icon:1,time:1
000});
$("#pimages")
.attr(&#
39;src&#
39;,data
.image_name);
$("#avatar")
.val(data
.image_name);
$("
.imgs")
.show();
return false;
}else{
layer
.msg(data
.info,{icon:2,time:1
000});
}
}
});
}
</script>
</body>
</html> 和adminlist
.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
管理员列表
</title>
<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">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="lib/loading/okLoading
.js"></script>
<link rel="stylesheet" href="css/main
.css" media="all">
<link rel="stylesheet" href="css/
bootstrap.css">
</head>
<body>
<div class="x-nav">
<span class="layui-breadcrumb">
<a><cite>首页</cite></a>
<a><cite>管理员管理</cite></a>
<a><cite>管理员列表</cite></a>
</span>
<a class="layui-btn layui-btn-small" style="line-height:1
.6em;margin-top:
3px;float:right" href="javascript:location
.replace(location
.href);" title="刷新"><i class="layui-icon" style="line-height:
30px">ဂ</i></a>
</div>
<div class="x-body">
<form class="layui-form x-center" action="" style="width:8
0%">
<div class="layui-form-pane" style="margin-top: 15px;">
<div class="layui-form-item">
<label class="layui-form-label">日期范围</label>
<div class="layui-input-inline">
<input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
</div>
<div class="layui-input-inline">
<input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
</div>
<div class="layui-input-inline">
<input type="text" name="username" placeholder="请输入登录名" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline" style="width:8
0px">
<button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button>
</div>
</div>
</div>
</form>
<xblock>
<button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
<button class="layui-btn" onclick="admin_add(&#
39;添加用户&#
39;,&#
39;adminadd
.html&#
39;,&#
39;6
00&#
39;,&#
39;5
00&#
39;)"><i class="layui-icon"></i>添加</button>
<span class="x-right" style="line-height:4
0px">共有数据：88 条</span>
</xblock>
<table class="layui-table">
<thead>
<tr>
<th>
<input type="checkbox" name="" value="">
</th>
<th>
ID
</th>
<th>
登录名
</th>
<th>
手机
</th>
<th>
邮箱
</th>
<th>
角色
</th>
<th>
加入时间
</th>
<th>
状态
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" value="1" name="">
</td>
<td>
1 </td>
<td>
admin </td>
<td >
1111111111 </td>
<td >
1111111@qq
.com
</td>
<td >
</td>
<td>
197
0-
01-
01
08:
00:
00 </td>
<td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,&#
39;1&#
39;,
0)"> 启用 </span>
</td>
<td class="td-manage">
<!--<a style="text-decoration:none" onclick="admin_stop(this,&#
39;1&#
39;)" href="javascript:;" title="停用">
<i class="layui-icon"></i>
</a>-->
<a title="编辑" href="javascript:;" onclick="admin_edit(&#
39;编辑&#
39;,&#
39;adminadd
.html&#
39;,&#
39;1&#
39;,&#
39;&#
39;,&#
39;51
0&#
39;)"
class="ml-5" style="text-decoration:none">
<i class="layui-icon"></i>
</a>
<a title="删除" href="javascript:;" onclick="admin_del(this,&#
39;1&#
39;)"
style="text-decoration:none">
<i class="layui-icon"></i>
</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="1" name="">
</td>
<td>
2 </td>
<td>
admin1 </td>
<td >
1111111111 </td>
<td >
111111111@qq
.com
</td>
<td >
超级管理员 </td>
<td>
197
0-
01-
01
08:
00:
00 </td>
<td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,&#
39;2&#
39;,
0)"> 启用 </span>
</td>
<td class="td-manage">
<!--<a style="text-decoration:none" onclick="admin_stop(this,&#
39;2&#
39;)" href="javascript:;" title="停用">
<i class="layui-icon"></i>
</a>-->
<a title="编辑" href="javascript:;" onclick="admin_edit(&#
39;编辑&#
39;,&#
39;adminadd
.html&#
39;,&#
39;2&#
39;,&#
39;&#
39;,&#
39;51
0&#
39;)"
class="ml-5" style="text-decoration:none">
<i class="layui-icon"></i>
</a>
<a title="删除" href="javascript:;" onclick="admin_del(this,&#
39;1&#
39;)"
style="text-decoration:none">
<i class="layui-icon"></i>
</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="1" name="">
</td>
<td>
3 </td>
<td>
admin2 </td>
<td >
11111111 </td>
<td >
11111111@qq
.com
</td>
<td >
超级管理员 </td>
<td>
197
0-
01-
01
08:
00:
00 </td>
<td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,&#
39;
3&#
39;,
0)"> 启用 </span>
</td>
<td class="td-manage">
<!--<a style="text-decoration:none" onclick="admin_stop(this,&#
39;
3&#
39;)" href="javascript:;" title="停用">
<i class="layui-icon"></i>
</a>-->
<a title="编辑" href="javascript:;" onclick="admin_edit(&#
39;编辑&#
39;,&#
39;adminadd
.html&#
39;,&#
39;
3&#
39;,&#
39;&#
39;,&#
39;51
0&#
39;)"
class="ml-5" style="text-decoration:none">
<i class="layui-icon"></i>
</a>
<a title="删除" href="javascript:;" onclick="admin_del(this,&#
39;1&#
39;)"
style="text-decoration:none">
<i class="layui-icon"></i>
</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="1" name="">
</td>
<td>
4 </td>
<td>
admin </td>
<td >
1111111111 </td>
<td >
111111111@qq
.com
</td>
<td >
</td>
<td>
2
019-
07-2
0 17:
03:28 </td>
<td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,&#
39;4&#
39;,
0)"> 启用 </span>
</td>
<td class="td-manage">
<!--<a style="text-decoration:none" onclick="admin_stop(this,&#
39;4&#
39;)" href="javascript:;" title="停用">
<i class="layui-icon"></i>
</a>-->
<a title="编辑" href="javascript:;" onclick="admin_edit(&#
39;编辑&#
39;,&#
39;adminadd
.html&#
39;,&#
39;4&#
39;,&#
39;&#
39;,&#
39;51
0&#
39;)"
class="ml-5" style="text-decoration:none">
<i class="layui-icon"></i>
</a>
<a title="删除" href="javascript:;" onclick="admin_del(this,&#
39;1&#
39;)"
style="text-decoration:none">
<i class="layui-icon"></i>
</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="1" name="">
</td>
<td>
5 </td>
<td>
admin </td>
<td >
11111111 </td>
<td >
111111111@qq
.com
</td>
<td >
</td>
<td>
2
019-
07-2
0 17:
03:41 </td>
<td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,&#
39;5&#
39;,
0)"> 启用 </span>
</td>
<td class="td-manage">
<!--<a style="text-decoration:none" onclick="admin_stop(this,&#
39;5&#
39;)" href="javascript:;" title="停用">
<i class="layui-icon"></i>
</a>-->
<a title="编辑" href="javascript:;" onclick="admin_edit(&#
39;编辑&#
39;,&#
39;adminadd
.html&#
39;,&#
39;5&#
39;,&#
39;&#
39;,&#
39;51
0&#
39;)"
class="ml-5" style="text-decoration:none">
<i class="layui-icon"></i>
</a>
<a title="删除" href="javascript:;" onclick="admin_del(this,&#
39;1&#
39;)"
style="text-decoration:none">
<i class="layui-icon"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div id="page"></div>
</div>
<script src="lib/layui/layui
.js" charset="utf-8"></script>
<script src="js/x-layui
.js" charset="utf-8"></script>
<script>
layui
.use([&#
39;laydate&#
39;,&#
39;element&#
39;,&#
39;laypage&#
39;,&#
39;layer&#
39;], function(){
$ = layui
.jquery;//jquery
laydate = layui
.laydate;//日期插件
lement = layui
.element();//面包导航
laypage = layui
.laypage;//分页
layer = layui
.layer;//弹出层
okLoading
.close($);
//以上模块根据需要引入
/*laypage({
cont: &#
39;page&#
39;
,pages: 1
00
,first: 1
,last: 1
00
,prev: &#
39;
<&#
39;
,next: &#
39;
>&#
39;
}); */
var start = {
min: laydate
.now()
,max: &#
39;2
099-
06-16 2
3:59:59&#
39;
,istoday: false
,choose: function(datas){
end
.min = datas; //开始日选好后，重置结束日的最小日期
end
.start = datas //将结束日的初始值设定为开始日
}
};
var end = {
min: laydate
.now()
,max: &#
39;2
099-
06-16 2
3:59:59&#
39;
,istoday: false
,choose: function(datas){
start
.max = datas; //结束日选好后，重置开始日的最大日期
}
};
document
.getElementById(&#
39;LAY_demorange_s&#
39;)
.onclick = function(){
start
.elem = this;
laydate(start);
}
document
.getElementById(&#
39;LAY_demorange_e&#
39;)
.onclick = function(){
end
.elem = this
laydate(end);
}
});
//批量删除提交
function delAll () {
layer
.confirm(&#
39;确认要删除吗？&#
39;,function(index){
//捉到所有被选中的，发异步进行删除
layer
.msg(&#
39;删除成功&#
39;, {icon: 1});
});
}
/*添加*/
function admin_add(title,url,w,h){
x_admin_show(title,url,w,h);
}
/*停用*/
function admin_stop(obj,id,e){
layer
.confirm(e==1?&#
39;你确定要启用吗？&#
39;:&#
39;你确定要禁用吗？&#
39;,{icon:
3, title:&#
39;提示&#
39;},function(index){
$
.ajax({
type:"post",
url:"xxx",
data:{id:id,status:e},
dataType:"json",
success:function(data)
{
if(data
.status==1){
//发异步把用户状态进行更改
$(obj)
.attr("class","layui-btn layui-btn-danger ");
$(obj)
.text("
隐藏");
$(obj)
.remove();
layer
.msg(data
.info,{icon: 6,time:1
000});
setTimeout(function(){
window
.location
.reload();
},1
000);return false;
}else{
//发异步把用户状态进行更改
$(obj)
.attr("class","layui-btn layui-btn-normal ");
$(obj)
.text("
显示");
$(obj)
.remove();
layer
.msg(data
.info,{icon: 5,time:1
000});return false;
}
}
});
});
}
/*启用*/
function admin_start(obj,id){
layer
.confirm(&#
39;确认要启用吗？&#
39;,function(index){
//发异步把用户状态进行更改
$(obj)
.parents("tr")
.find("
.td-manage")
.prepend(&#
39;<a style="text-decoration:none" onClick="admin_stop(this,id)" href="javascript:;" title="停用"><i class="layui-icon"></i></a>&#
39;);
$(obj)
.parents("tr")
.find("
.td-status")
.html(&#
39;<span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>&#
39;);
$(obj)
.remove();
layer
.msg(&#
39;已启用!&#
39;,{icon: 6,time:1
000});
});
}
//编辑
function admin_edit (title,url,id,w,h) {
url = url+"?id="+id;
x_admin_show(title,url,w,h);
}
/*删除*/
function admin_del(obj,id){
layer
.confirm(&#
39;确认要删除吗？&#
39;,function(index){
//发异步删除数据
$(obj)
.parents("tr")
.remove();
layer
.msg(&#
39;已删除!&#
39;,{icon:1,time:1
000});
});
}
</script>
</body>
</html>，这是我的admin
.js:// js/admin
.js
const AdminManager = {
// 获取所有管理员
getAll: function() {
return JSON
.parse(localStorage
.getItem(&#
39;admins&#
39;)) || [];
},
// 保存所有管理员
saveAll: function(admins) {
localStorage
.setItem(&#
39;admins&#
39;, JSON
.stringify(admins));
},
// 获取单个管理员
getById: function(id) {
return this
.getAll()
.find(item => item
.id == id);
},
// 添加或更新管理员
save: function(admin) {
let admins = this
.getAll();
if (admin
.id) {
// 更新
const index = admins
.findIndex(a => a
.id == admin
.id);
if (index !== -1) {
admins[index] = admin;
}
} else {
// 新增
admin
.id = this
.generateId();
admin
.create_time = new Date()
.toLocaleString();
admins
.push(admin);
}
this
.saveAll(admins);
return admin;
},
// 删除管理员
delete: function(id) {
let admins = this
.getAll()
.filter(a => a
.id != id);
this
.saveAll(admins);
},
// 生成ID
generateId: function() {
const admins = this
.getAll();
return admins
.length >
0 ? Math
.max(
...admins
.map(a => a
.id)) + 1 : 1;
}
}现在的问题是运行出来界面添加删除按钮点了没反应，我现在只需要弄好前端不需要和后端交互，添加的信息存本地就行先不连数据库，请你帮我解决一下，并且一定要给我完整的修改后的代码，
本文介绍了一种使用JavaScript操作DOM元素状态的方法，特别是如何通过添加和移除'disabled'类来改变按钮的状态。此技巧适用于前端开发中需要动态控制元素交互性的场景。
扫一扫
502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
