需要的数据
{
"code": 0,
"msg": "",
"count": 1000,
"data": [
{
"id": 10010,
"username": "user-10",
"sex": "女",
"city": "城市-10",
"sign": "签名-10",
"experience": 1016,
"logins": 182,
"wealth": 71294671,
"classify": "诗人",
"score": 34
}
]
}
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
<title> layUI</title>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<link rel="stylesheet" href="${path}/layui/css/layui.css" media="all">
<link rel="stylesheet" href="${path}/layui/css/formSelects-v4.css" media="all">
<script type="text/javascript" src="${path}/js/jquery.min.js"></script>
<script type="text/javascript" src="${path}/layui/layui.js"></script>
</head>
<body>
<h2>User 列表</h2>
<hr>
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">用户名:</label>
<div class="layui-input-inline" style="width: 200px;">
<input id="username" type="text" name="price_min" placeholder=" Google I/O" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label">角色:</label>
<div class="layui-input-inline" style="width: 360px;">
<select xm-select="roles" name="" id="roles">
<option value="-1">全部</option>
</select>
</div>
<div class="layui-input-inline" style="width: 100px;">
<button type="button" class="layui-btn layui-btn-normal" onclick="searchData();"><i class="layui-icon layui-icon-search"></i> 查询</button>
</div>
</div>
</div>
</form>
<hr>
<table class="layui-table" lay-data="{id:'userTable',url:'${path}/sysUser/list', page:true,toolbar: '#toolbarDemo',defaultToolbar: ['filter', 'print', 'exports'],even: true<%--,size: 'sm',skin:'nob'--%>}" lay-filter="userTable">
<thead>
<tr>
<th lay-data="{type:'checkbox'}"></th>
<th lay-data="{field:'id', width:80, sort: true}">ID</th>
<th lay-data="{field:'username', width:80}">用户名</th>
<th lay-data="{field:'salt'}">颜值</th>
<th lay-data="{field:'locked',templet:'#lockedTem'}">是否锁定</th>
<th lay-data="{field:'roleString'}">所属角色</th>
<th lay-data="{field:'regDate', sort: true}">注册日期</th>
<th lay-data="{toolbar:'#barDemo'}">操作</th>
</tr>
</thead>
</table>
<script>
//加载角色
$.get("${path}/sysRole/search",function (data) {
$.each(data,function () {
var opt = $("<option></option>").appendTo("#roles");
opt.text(this.name).val(this.id);
});
})
/*多条件查询*/
function searchData(){
layui.table.reload("userTable",{
page:{
curr : 1
},
where:{
"username":$("#username").val(),
"roleIds":layui.formSelects.value('roles','valStr')
}
});
}
//全局定义一次, 加载formSelects(下拉框)
layui.config({
base: '${path}/layui/lay/modules/' //此处路径请自行处理, 可以使用绝对路径
}).extend({
formSelects: 'formSelects-v4'
});
//加载表格
layui.use(["table","form","formSelects"],function () {
/*alert("加载完成！");*/
var table =layui.table;
//监听工具栏事件
table.on('toolbar(userTable)',function (obj) {
var e = obj.event;
switch(e){
case "add":
$.get('${path}/sysUser/form',function (str) {
layer.open({
type:1,
title:'添加用户',
area:'1000px',
content: str,
/*skin:'layui-layer-molv',*/
skin:'layui-layer-lan',
btn: ['确定','取消'],
yes:function (index) {
var params = $("#add_user_form").serialize();
$.post('${path}/sysUser/add',params,function () {
layer.close(index);
layer.msg('添加成功');
table.reload('userTable');
})
}
});
});
break;
case "batchDelete":
var rows = table.checkStatus('userTable');
var data = rows.data;
if(data.length == 0){
layer.msg("请选择要Delete的数据!",function(){});
return;
}
layer.confirm('真的要删除这么多数据嘛!',{icon:1,title:'友情提示'},function(index) {
var params = "";
for(let user of data){
params += "ids="+user.id+"&";
}
$.post('${path}/sysUser/batchDelete',params,function () {
layer.close(index);
table.reload('userTable');
});
});
break;
}
});
//监听行工具事件
table.on("tool(userTable)",function (obj) {
var data = obj.data;
if(obj.event == 'edit'){//执行修改操作
$.get('${path}/sysUser/form',function (str) {
layer.open({
type:1,
title:'修改用户',
area:'1000px',
content: str,
skin:'layui-layer-molv',
btn: ['确定','取消'],
//显示数据
success:function(){
$.get('${path}/sysUser/view',{id:data.id},function (data) {
//显示修改中的数据
layui.form.val('userForm',data);
var aa = new Array();
for(let role of data.roles){
aa.push(role.id);
}
layui.formSelects.value('roles2',aa);
})
},
yes:function (index) {
var params = $("#add_user_form").serialize();
$.post('${path}/sysUser/upd',params,function () {
layer.close(index);
layer.msg('修改成功');
table.reload('userTable');
});
}
});
});
}else if(obj.event == 'del'){//delete
layer.open({
time:0,
title:'友情提示',
content:"确定要删除该行数据吗？",
shade: [0.3, '#000'],
btn:['确定','取消'],
yes : function () {
$.post("${path}/sysUser/batchDelete",{"ids":data.id},function () {
layer.msg('删除成功');
table.reload('userTable');
});
}
});
}
})
});
</script>
<%--锁定列模板 模板必须写成text/html --%>
<script type="text/html" id="lockedTem">
<input type="checkbox" title="锁定" {{d.locked ==1 ? 'checked':''}}>
</script>
<%--操作—编辑与删除--%>
<script type="text/html" id="barDemo">
<a href="javascript:void(0);" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
<c:if test="${per.type eq 'function' and per.percode eq 'user:delete'}">
<a href="javascript:void(0);" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
</c:if>
</script>
<%--工具栏--%>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<shiro:hasPermission name="user:add">
<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i> 添加</button>
</shiro:hasPermission>
<shiro:hasPermission name="user:delete">
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete"><i class="layui-icon layui-icon-delete"></i> 批量删除</button>
</shiro:hasPermission>
<button class="layui-btn layui-btn-sm" lay-event="export"><i class="layui-icon layui-icon-export"></i> 导出数据</button>
</div>
</script>
</body>
</html>
from.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form class="layui-form" lay-filter="userForm" id="add_user_form" action="" style="padding:15px 10px;">
<input type="hidden" name="id">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入标题" 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="password" name="password" required lay-verify="required" placeholder="请输入密码" 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="text" name="salt" required lay-verify="required" placeholder="请输入标题" 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="checkbox" name="locked" value="1" lay-skin="switch">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户角色</label>
<div class="layui-input-block" >
<select name="roleIds" id="roles_add" xm-select="roles2" xm-select-direction="down">
<option value="-1">请选择</option>
</select>
</div>
</div>
<script>
layui.form.render();
$.get("${path}/sysRole/search",function(data){
$.each(data,function(){
var opt = $("<option></option>").appendTo("#roles_add");
opt.text(this.name).val(this.id);
});
layui.formSelects.render();
});
</script>
</form>
</body>
</html>
