nodejs系列： 综合练习实例 用户管理主界面 usersPage.ejs javascript
发布时间：2019-01-28 16:51:51 作者：本站编辑 来源：本站原创 浏览次数：
www.javainfo.com.cn 上干货 欢迎收藏
如有疑问 请留言 欢迎提供建议
这里采用layui搭建用户管理模块的主题代码
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<!-- 引入layui框架 start-->
<link rel="stylesheet" href="/thirdmodels/layui-v2.4.3/layui/css/layui.css" media="all">
<script src="/thirdmodels/layui-v2.4.3/layui/layui.js" charset="utf-8"></script>
<!-- 引入layui框架 end-->
</head>
<body>
<h1><%= title %></h1>
<p> www.javainfo.com.cn java开发实际问题汇总 网站，欢迎登录注册 成为会员 ！！</p>
<p>
接下来展示 人员分页数据列表 前台技术为 layui2.4* 以上
</p>
<div class="layui-fluid">
<!-- 封装查询模块 wj-->
<div class="layui-item">
<form class="layui-form layui-inline" role="form">
<label class="layui-form-label" for="content">用户名：</label>
<div class="layui-inline">
<input type="text" content="content" id="content" style="width: 200px;"
lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
<button class="layui-btn" lay-submit="" data-type="reload" id="searchbtn" lay-filter="searchbtn">查询</button>
</form>
<button class="layui-btn layui-btn-normal" data-type="reset" id="searchReset" lay-filter="searchReset">重置</button>
</div>
<table class="layui-hide" id="listtable" lay-filter="appendTools"></table>
</div>
<!-- 工具栏模块 start-->
<!-- 行内操作按钮 -->
<script type="text/html" id="gongjulan">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- table左上房 工具栏 -->
<script type="text/html" id="toptoolbar">
<div class="layui-table-tool-temp">
<div class="layui-inline" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
</div>
<div class="layui-inline" lay-event="delete">
<i class="layui-icon layui-icon-delete"></i>
</div>
</div>
</script>
<!-- 工具栏模块 end -->
<script>
//引入layui的模块
layui.use(['table','layer','element'], function(){
$ = layui.$
,table = layui.table
,layer = layui.layer
,element = layui.element
,form = layui.form //表单
;
//开始渲染 数据表格的数据
table.render({
elem: '#listtable'
,url: '/userService/pageList'
,method: "post"
,title: '用户信息表'
,limit:10
,toolbar: '#toptoolbar'
,cols: [[ //表头
{checkbox: true, type: 'checkbox', fixed: 'left'}
,{field:'id', title: 'ID', sort: true, fixed: true}
,{field:'name', title: '姓名', sort: true, fixed: true}
,{field:'age', title: '年龄', sort: true, fixed: true}
,{field:'flag', title: '删除标记', sort: true, fixed: true}
,{fixed: 'right', align:'center', toolbar: '#gongjulan',width:250}
]],
id:'testRelaod'
,page: true //开启分页
,where:{content:''}
});
var $ = layui.$, active = {
reload: function(){
var content = $('#content');
//执行重载
table.reload('testRelaod', {
where: {
content:content.val()
}
,page: {
curr: 1 //重新从第 1 页开始
}
});
},
reset: function(){
var content = $('#content');
//执行重载
table.reload('testRelaod', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
content: ''
}
});
}
};
//监听提交
form.on('submit(searchbtn)', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
return false;
});
$('#searchReset').on('click',function(){
$('#content').val('')
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
})
//头工具栏事件
table.on('toolbar(appendTools)', function(obj){
var checkStatus = table.checkStatus(obj.config.id)
,data = checkStatus.data; //获取选中的数据
switch(obj.event){
case 'add':
layer.open({
id:"addForm",
title:"添加用户信息",
type: 2,
area: ['500px', '300px'],
btn:["提交用户信息"],
content: '/userOther/toReg',
zIndex: layer.zIndex, //重点1
success: function(layero){
layer.setTop(layero); //重点2
},
yes: function(index, layero){
var frameId=document.getElementById('addForm').getElementsByTagName("iframe")[0].id;
var frameForm = $('#'+frameId)[0].contentWindow.document.getElementById('searchbtn1');
console.log('add yes function start ');
frameForm.click();
console.log('add yes function end ');
},
end: function(){
console.log('add end ..... ');
table.reload('testRelaod');
console.log('add end 2..... ');
}
});
break;
case 'delete':
if(data.length === 0){
layer.msg('请选择一行');
} else {
layer.confirm('请确认 此用户将被删除', function(index){
//var data = obj.data ;
for(var i=0;i<data.length;i++){
$.ajax({
url : "/userOther/doDelete?id="+data[i].id,
type : "POST",
dataType : "json",
success : function(result){
obj.del(); //删除对应行（tr）的DOM结构
layer.msg("删除成功");
table.reload('testRelaod');
layer.close(index);
}
});
}
})
}
break;
};
});
table.on('tool(appendTools)', function(obj){
var data = obj.data //获得当前行数据
,layEvent = obj.event; //获得 lay-event 对应的值
if(layEvent === 'detail'){
layer.open({
id:"viewForm",
title:"查看用户详情",
type: 2,
area: ['400px', '200px'],
//maxmin: true,
content: '/userOther/toView?id='+data.id,
zIndex: layer.zIndex, //重点1
success: function(layero){
layer.setTop(layero); //重点2
}
});
}
else if(layEvent === 'edit'){
layer.open({
id:"editForm",
title:"编辑用户信息",
type: 2,
btn:["提交用户修改信息"],
area: ['400px', '300px'],
content: '/userOther/toEdit?id='+data.id,
zIndex: layer.zIndex, //重点1
success: function(layero){
layer.setTop(layero); //重点2
},
yes: function(index, layero){
console.log('edit yes start ')
var frameId=document.getElementById('editForm').getElementsByTagName("iframe")[0].id;
var frameForm = $('#'+frameId)[0].contentWindow.document.getElementById('searchbtn1');
frameForm.click();
console.log('edit yes end ')
}
,
end: function(){
console.log('edit end')
table.reload('testRelaod');
}
});
}
else if(layEvent === 'del'){
layer.confirm('请确认 此记录将被删除', function(index){
var data = obj.data ;
$.ajax({
url : "/userOther/doDelete?id="+data.id,
type : "POST",
dataType : "json",
success : function(result){
if(result.RES.status == 1){
layer.msg(result.RES.msg);
obj.del();
layer.close(index);
table.reload('testRelaod');
}else{
layer.msg(result.RES.msg);
}
}
});
});
}
});
});
</script>
</body>
</html>如有疑问 请留言 欢迎提供建议
评论已有 0 条