普通用户管理系统 - 用户列表
<p><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %></p>
<html>
<head>
<pre><code><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户管理模块-普通用户</title>
<!--全局CSS-->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" />
<link href="/css/bootstrapValidator.min.css" rel="stylesheet" type="text/css" />
<link href="/static/plugins/bootstrap_table/Content/bootstrap-table.css" rel="stylesheet" type="text/css" />
<!--全局JS-->
<script src="/js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/static/plugins/bootstrap_table/Scripts/Bootstrap/ArbetTable.js" type="text/javascript"></script>
<script src="/static/plugins/bootstrap_table/Scripts/Bootstrap/bootstrap-table.js" type="text/javascript"></script>
<script src="/static/plugins/bootstrap_table/Scripts/Bootstrap/locale/bootstrap-table-zh-CN.js" type="text/javascript"></script>
<script src="/static/plugins/layer/layer.js" type="text/javascript"></script>
<script src="/static/plugins/laydate/laydate.js" type="text/javascript"></script>
<!-- 对等js -->
<script type="text/javascript" src="/static/js/main/userMgr/normalUser.js"></script>
</code></pre>
</head>
<body>
<div id="position" class="Fixed_layer">
<div class="controls-row" style="padding:20px;font-size:15px;font-weight: bold">
邮箱地址:<input type="text" id="email" name="email" style="margin-left:5px;margin-right:10px" />
昵称:<input type="text" id="nickName" name="email" style="margin-left:5px;margin-right:10px" />
创建日期:<input type="text" id="createDate" name="email" style="margin-left:5px;margin-right:10px" autocomplete="off" />
用户状态:
<select style="margin-left:5px;" id="userState">
<option value ='0' selected = 'selected'>--- 启用 ---</option>
<option value ='1'>--- 禁用 ---</option>
</select>
<pre><code> <button class="btn btn-primary btn-sm glyphicon glyphicon-search" name="userNormal_search" style="margin-left:100px"
onclick="userNormal_search()">查询</button>
</div>
<!-- 按钮功能组 -->
<div class="controls controls-row" style="padding: 15px; padding-left: 100px">
<button class="btn btn-primary btn-sm glyphicon glyphicon-plus" name="userNormal_add" style="margin-left:10px;"
onclick="userNormal_add()">新增</button>
<button class="btn btn-primary btn-sm glyphicon glyphicon-pencil" name="userNormal_edit" style="margin-left:10px;"
onclick="userNormal_edit()">修改</button>
<button class="btn btn-primary btn-sm glyphicon glyphicon-minus" name="userNormal_delete" style="margin-left:10px;"
onclick="userNormal_delete()">删除</button>
</div>
</div>
<!-- 用户管理模块-普通用户 -->
<table id="userNormalTable"></table>
</code></pre>
</body>
<script type="text/javascript">
//日期和时间选择器
laydate.render({
elem: '#createDate',
type: 'datetime'
});
</script>
</html>
//初始化参数
var id;
var email;
var nickName;
var userState;
var createDate;
<p>//初始化表格的列
userNormal_initColumn = function () {
var columns = [
{field: 'selectItem', radio: true, visible: true},
{title: 'id', field: 'id', visible: false, align: 'center', valign: 'middle'},
{title: '邮箱地址', field: 'email', visible: true, align: 'center', valign: 'middle', sortable: true},
{title: '昵称', field: 'nickName', visible: true, align: 'center', valign: 'middle', sortable: true},
{title: '用户状态', field: 'userState', align: 'center', valign: 'middle', sortable: true,
formatter: function (value, row, index) {
if(value == 0){
return "启用";
}
else{
return "禁用";
}
}},
{title: '创建日期', field: 'createDate', align: 'center', valign: 'middle', sortable: true},</p>
<pre><code>];
return columns;
</code></pre>
<p>};</p>
<p>/**</p>
<ul>
<li>检查是否选中
*/
userNormal_check = function () {
//获得row数组
var rows = $("#userNormalTable").bootstrapTable('getSelections');
if (rows.length == 0) {
return false;
} else {
return true;
}
};</li>
</ul>
<p>//删除
userNormal_delete = function () {
if(userNormal_check()){
//获得当前选中行对象
var rows = $("#userNormalTable").bootstrapTable('getSelections');
//获得选中id
var id = rows[0].id;
//发送ajax执行删除
$.ajax({
url:"/user/remove",
type:"POST",
data:{"id":id},
success:function(data){
//成功操作
if(data == true){
layer.msg("删除成功");
$("#userNormalTable").bootstrapTable('refresh');
}
//失败操作
else{
layer.msg("删除失败");
}
},
dataType:"json"
});</p>
<pre><code>}
else{
layer.msg("请先选中至少一条记录！");
}
</code></pre>
<p>};</p>
<p>//添加
userNormal_add = function(){
var index = layer.open({
type: 2,
title: '添加用户',
area: ['500px', '460px'], //宽高
fix: false, //不固定
maxmin: true,
content: '/static/page/main/userMgr/normalUser_add.jsp'
});
this.layerIndex = index;
}</p>
<p>//修改
userNormal_edit = function(){
if(userNormal_check()){
//获得当前选中行对象
var rows = $("#userNormalTable").bootstrapTable('getSelections');
//获得参数
var id = rows[0].id;
var nickName = rows[0].nickName;
var userState = rows[0].userState;
var createDate = rows[0].createDate;
var index = layer.open({
type: 2,
title: '修改用户',
area: ['500px', '490px'], //宽高
fix: false, //不固定
maxmin: true,
content: '/static/page/main/userMgr/normalUser_edit.jsp',
data:{
id:id,
nickName:nickName,
userState: userState,
createDate:createDate
},
});
this.layerIndex = index;
}
else{
layer.msg("请先选中至少一条记录！");</p>
<pre><code>}
</code></pre>
<p>}</p>
<p>//收集参数
function collectParam(){
email = $("#email").val();
nickName = $("#nickName").val();
createDate = $("#createDate").val();
userState = $("#userState").val();
}</p>
<p>//BootStrap查询
function userNormal_search() {
//收集参数
collectParam();
var opt = {
url: "/user/queryCondition",
silent: true,
query:{
email: email,
nickName: nickName,
createDate: createDate,
userState: userState,
}
};
$("#userNormalTable").bootstrapTable('refresh',opt);
};</p>
<p>$(function(){
var column = userNormal_initColumn();
$("#userNormalTable").bootstrapTable({
contentType: "application/x-www-form-urlencoded",
url: '/user/queryList',
method: 'post', //ajax方式,post还是get
//toolbar: "#toolbar", //顶部工具条
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true
sortable: true, //是否启用排序
sortOrder: "desc", //排序方式
pagination: true, //启用分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 5, //每页的记录行数（<em>）
pageList: [5, 10, 15,'All'], //可供选择的每页的行数（</em>）
queryParamsType: 'limit', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
queryParams:{"param":"testData"}, // 向后台传递的自定义参数
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
strictSearch: true, //设置为 true启用 全匹配搜索，否则为模糊搜索
showColumns: false, //是否显示所有的列
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
searchOnEnterKey: true, //设置为 true时，按回车触发搜索方法，否则自动触发搜索方法//pagination: true, //是否显示分页条
height: 365, //底部栏高
icons: {
refresh: 'glyphicon-repeat',
toggle: 'glyphicon-list-alt',
columns: 'glyphicon-list'
},
iconSize: 'outline',</p>
<pre><code> columns:column,//列数组
});
</code></pre>
<p>});
根据这段代码写出查询的后端代码内容：@RequestMapping(value="/user/queryList", method=RequestMethod.POST)
@ResponseBody
public Map<String, Object> queryList(int offset, int limit){
Map<String, Object> map = new HashMap<>();
List<User> userList = userService.queryList(offset, limit);
int total = userService.queryTotal();
map.put("total", total);
map.put("rows", userList);
return map;
}</p>
<p>@RequestMapping(value="/user/queryCondition", method=RequestMethod.POST)
@ResponseBody
public Map<String, Object> queryCondition(int offset, int limit, String email, String nickName, String createDate, int userState){
Map<String, Object> map = new HashMap<>();
List<User> userList = userService.queryCondition(offset, limit, email, nickName, createDate, userState);
int total = userService.queryConditionTotal(email, nickName, createDate, userState);
map.put("total", total);
map.put("rows", userList);
return map;</p>
原文地址: https://www.cveoy.top/t/topic/mO1W 著作权归作者所有。请勿转载和采集!