普通用户管理系统 - 用户列表
<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>
<button class='btn btn-primary btn-sm glyphicon glyphicon-search' name='userNormal_search' style='margin-left:10px'
onclick='shuaxin()'>刷新</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: true, 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,
formatter: function (value, row, index) {
return formatDate(value);
}
}
];
return columns;
};
//把页面取到的时间值的.0去掉
function formatDate(value) {
if (value != null) {
var date = new Date(Math.floor(value));
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
} else {
return '';
}
}</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'
});
}
else{
layer.msg('请先选中至少一条记录！');
}
};</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();
}
/<em>//收集参数
function collectParam(){
email = $('#email').val();
if(email == ''){
email = null;
}
nickName = $('#nickName').val();
if(nickName == ''){
nickName = null;
}
createDate = $('#createDate').val();
if(createDate == ''){
createDate = null;
}
userState = $('#userState').val();
if(userState == ''){
userState = null;
}
}</em>/</p>
<p>//BootStrap查询
function userNormal_search() {
//收集参数
collectParam();
var opt = {
url: '/user/queryCondition',
silent: true,//静态刷新
query:{//传入url里的参数
email: email,
nickName: nickName,
createDate: createDate,
userState: userState,
}
};
$('#userNormalTable').bootstrapTable('refresh',opt);</p>
<p>};
function shuaxin() {
location.reload();
}
$(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, //底部栏高
/<em>customSearch:customSearch,//自定义搜索，比如只搜索ID字段</em>/
icons: {
refresh: 'glyphicon-repeat',
toggle: 'glyphicon-list-alt',
columns: 'glyphicon-list'
},
iconSize: 'outline',
columns:column,//列数组
});
/<em>function customSearch(data, text) {
//获得当前选中行对象
var rows = $('#userNormalTable').bootstrapTable('getSelections');
//返回参数
return data.filter(function (rows) {
return (rows[0].id+'').indexOf(text) > -1
})
}</em>/
});</p>
<pre><code></code></pre>
原文地址: https://www.cveoy.top/t/topic/ngCU 著作权归作者所有。请勿转载和采集!