<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../head.jsp" %>
<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">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>查询用户</legend>
</fieldset>
<div class="layuimini-container">
<div class="layuimini-main">
<fieldset class="table-search-fieldset">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">姓名</label>
<div class="layui-input-inline">
<input type="text" name="name" id="name" autocomplete="off" placeholder="请输入姓名"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">院系</label>
<div class="layui-input-block">
<select name="college" id="college" lay-filter="college">
<option value="">请选择</option>
<c:forEach items="${collegeList}" var="college">
<option value="${college.collegeId}">${college.collegeName} </option>
</c:forEach>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">专业</label>
<div class="layui-input-block">
<select name="major" id="major">
<option value="">-请选择-</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">班级</label>
<div class="layui-input-inline">
<input type="text" name="clazz" id="clazz" autocomplete="off" placeholder="请输入班级"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">年级</label>
<div class="layui-input-inline">
<input type="text" id="grade" name="grade" autocomplete="off" placeholder="请输入年级"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<button type="submit" class="layui-btn layui-btn-primary" lay-submit=""
lay-filter="queryBtn">
<i class="layui-icon"></i>查询
</button>
</div>
<div class="layui-inline">
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</fieldset>
<!-- 头部工具栏模板 -->
<script type="text/html" id="headToolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">添加用户</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">禁用</button>
</div>
</script>
<table class="layui-hide" id="myTable" lay-filter="myTable"></table>
<script type="text/html" id="rowToolBar">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">禁用</a>
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="reset">密码重置</a>
</script>
</div>
</div>
<script>
layui.use(['form', 'table', 'jquery'], function () {
var form = layui.form;
var table = layui.table;
var $ = layui.$;
table.render({
elem: '#myTable'
, url: 'BaseServlet.do?servlet=UserServlet&method=searchList'
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
, where: {name: '', college: '', major: '', clazz: '', grade: ''}
, cols: [[
{field: 'userId', width: 50, type: 'checkbox'}
, {
field: 'realName', width: 100, title: '姓名', style: 'font-size: 12px; color: #666; cursor:pointer;',
event: 'view'
}
, {field: 'college', width: 150, title: '院系', templet: college}
, {field: 'major', width: 150, title: '专业', templet: major}
, {field: 'clazz', width: 80, title: '班级',}
, {field: 'grade', width: 80, title: '年级'}
, {field: 'phone', width: 180, title: '手机号'}
, {field: 'qq', width: 180, title: 'QQ号'}
, {field: 'duty', width: 180, title: '校内职务'}
, {field: 'forbidden', title: '用户状态', minWidth: 100, templet: forbidden}
, {field: 'right', title: '操作', width: 200, align: 'center', toolbar: '#rowToolBar'}
]]
// , text:{none: '请查询' // 默认无数据}
, limits: [1, 10, 15, 30, 50, 100]
, limit: 10
, page: true
, toolbar: '#headToolbar'
});
// 院系专业联动
form.on('select(college)', function (data) {
var college = $("select[name='college']").val();
var url = "BaseServlet.do?servlet=MajorServlet&method=searchListAll&college=" + college;
$.get(url, function (resp) {
if (resp == "") {
$("select[name='major']").empty();
$("select[name='major']").append("<option value=''>无</option>")
form.render("select");
} else {
var arr = resp.split(",");
$("select[name='major']").empty();
$("select[name='major']").append("<option value=''>-请选择-</option>")
for (let i = 0; i < arr.length; i++) {
let major = arr[i];
let arr2 = major.split("-");
$("select[name='major']").append("<option value='" + arr2[0] + "'>" + arr2[1] + "</option>")
}
form.render("select");
}
})
});
// 双击事件
table.on('rowDouble(myTable)', function (obj) {
layui.use('layer', function () {
var index = layer.open({
title: '修改用户信息',
type: 2,
shade: 0.2,
maxmin: true,
shadeClose: true,
area: ['100%', '100%'],
content: "/BaseServlet.do?servlet=UserServlet&method=modifyPage&userId=" + obj.data.userId,
end: function () {
location.reload();
}
});
$(window).on("resize", function () {
layer.full(index);
});
});
});
//监听工具条
table.on('tool(myTable)', 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 === 'del') { //删除
layer.confirm('是否删除选择的信息?', function (index) {
let userId = data.userId;
let str = "/BaseServlet.do?servlet=UserServlet&method=del&userId=" + userId;
$.get(str, function (res) {
if (res == "true") {
// 要向后台请求Ajax，得到响应看结果，如果后台删除成功，再del
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
table.reload('myTable', {
page: {
curr: 1
}
}, 'data');
//向服务端发送删除指令
layer.msg("删除成功！");
} else {
layer.msg("删除失败！");
}
})
});
} else if (layEvent === 'view') { //查看
// 切换浏览器地址栏，即打开一个新的页面
var index = layer.open({
title: '查看用户信息',
type: 2,
shade: 0.2,
maxmin: true,
shadeClose: true,
area: ['100%', '100%'],
content: "/BaseServlet.do?servlet=UserServlet&method=searchById&userId=" + data.userId,
});
$(window).on("resize", function () {
layer.full(index);
});
} else if (layEvent === 'reset') { //重置
layer.confirm('是否重置密码?', function (index) {
let userId = data.userId;
let str = "/BaseServlet.do?servlet=UserServlet&method=modifyPw&userId=" + userId;
$.get(str, function (res) {
if (res == "true") {
layer.msg("重置成功！");
} else {
layer.msg("重置失败！");
}
})
});
}
});
var array = [];
table.on('checkbox(myTable)', function (obj) {
// console.log(obj.tr) //得到当前行元素对象
var tr = obj.tr; //得到当前点击复选框的行元素对象
if (obj.type == 'all') { //点击全选按钮触发此处
var len = array.length;
array.splice(0, len); //全选后删除数组项，重新添加全选的dom元素
array.push(obj.tr.prevObject[0]);
} else {
if (obj.checked) { //多选框被选中则添加dom元素到数组
array.push(tr);
} else {//取消多选框的选中则在数组中删除自己
var indexs = obj.tr[0].rowIndex; //获取取消选中的元素对象下标
array.forEach((item, index) => {
//当数组中任意一个元素的rowIndex值与取消复选框的元素对象属性rowIndex的下标值相等，则在数组中删除该元素
if (item[0].rowIndex == indexs) {
array.splice(index, 1);
}
})
}
}
});
// 监听头部工具栏事件 toolbar是指的是表格头部的工具栏
table.on('toolbar(myTable)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'add':
var index = layer.open({
title: '添加用户',
type: 2,
shade: 0.2,
maxmin: true,
shadeClose: true,
area: ['100%', '100%'],
content: 'BaseServlet.do?servlet=UserServlet&method=addPage',
});
// 关闭弹出层
$(window).on("resize", function () {
layer.full(index);
});
break;
case 'delete':
if (checkStatus.data.length == 0) {
layer.msg("请选择要删除的记录！");
} else {
var jsonData = JSON.stringify(checkStatus.data);
var result = JSON.parse(jsonData);
var B = new Array();
for (let i = 0; i < result.length; i++) {
B[i] = result[i].userId;
}
layer.confirm('真的删除行么', function (index) {
let url = "BaseServlet.do?servlet=UserServlet&method=deleteAll&String=" + B;
$.get(url, function (res) {
if (res.search("true") != -1) {
array.forEach((item) => {
item.remove();
table.reload('myTable', {
page: {
curr: 1
}
, where: {
searchParams: result
}
}, 'data');
})
layer.msg("删除成功！");
layer.close(index);
} else {
layer.msg("删除失败！", {})
}
})
})
}
break;
}
;
});
// 监听搜索操作
form.on('submit(queryBtn)', function (data) {
// id选择器获取搜索值
var name = $('#name').val()
var college = $('#college').val()
var major = $('#major').val()
var clazz = $('#clazz').val()
var grade = $('#grade').val()
if (name == '' && college == '' && major == '' && clazz == '' && grade == '') {
layer.msg("搜索信息不能有空")
} else {
//执行搜索重载
table.reload('myTable', {
url: 'BaseServlet.do?servlet=UserServlet&method=searchList',
where: {
name: name,
college: college,
major: major,
clazz: clazz,
grade: grade
},
limits: [1, 10, 15, 30, 50, 100]
, limit: 10
, page: true
}, 'data');
}
return false;
});
});
//院系的解析
function college(row) {
return row.college.collegeName;
}
//专业的解析
function major(row) {
return row.major.majorName;
}
function forbidden(row) {
if (row.forbidden == 0) {
return '正常';
} else if (row.forbidden == 1) {
return '禁用';
} else {
return '未知';
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号