普通用户管理系统 - 用户列表
<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>});
@Controller
public class UserController {
@Autowired
private UserService userService;</p>
<pre><code>@RequestMapping(value = '/queryList')
@ResponseBody
public PageInfo<user> queryList(@RequestParam(value='pageNum',defaultValue='1')int pageNum,
@RequestParam(value='pageSize',defaultValue='5')int pageSize){
PageHelper.startPage(pageNum, pageSize);
List<user> userList = userService.JDBCSelectAll1();
PageInfo<user> pageInfo = new PageInfo<>(userList);
return pageInfo;
}
</code></pre>
<p>}
//泛型类 PageInfo<T>，其中 T 表示实体类的类型，比如这里的 user 类型。
public class PageInfo<T> {
// ... 其他属性和方法
private List<T> list; // 存放数据结果集
// ... 其他属性和方法
}</p>
原文地址: https://www.cveoy.top/t/topic/mO7x 著作权归作者所有。请勿转载和采集!