普通用户管理系统 - 用户列表
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<pre><code><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},</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"
});
}
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>/
});
为什么查询出来的createDate值为2023-04-09 01:34:35.0，为什么多出来个.0，怎么修改内容：这是因为在Java中，日期时间类型的值会被转换为带有小数点的数字类型，例如在Java中日期时间类型的值2023-04-09 01:34:35会被转换为一个long类型的数字，而在JavaScript中无法直接表示long类型的数字，因此在传输过程中会被转换为带有小数点的数字类型。</p>
<p>要解决这个问题，可以在前端代码中对日期时间类型的值进行格式化处理，去掉小数点后的部分。例如，在页面中添加以下代码：</p>
<p>//格式化日期时间类型的值
function formatDate(value) {
if (value != null) {
var date = new Date(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>
<p>{title: '创建日期', field: 'createDate', align: 'center', valign: 'middle', sortable: true,
formatter: function (value, row, index) {
return formatDate(value);
}
}</p>
<p>这样就可以去掉日期时间类型的值中的小数点部分，只显示日期时间。</p>
原文地址: https://www.cveoy.top/t/topic/ngCE 著作权归作者所有。请勿转载和采集!