七、页面显示
admin_select.jsp
<!-- easyui的样式文件 -->
<link rel="stylesheet" type="text/css"
href="./themes/default/easyui.css">
<!-- 图标样式的文件 -->
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/themes/icon.css">
<!-- 引入jquery easyui文件 -->
<!-- jQuery文件 -->
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/easyui/jquery.min.js"></script>
<!-- jQuery easyui的文件 -->
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<!-- 自定义js文件 -->
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/admin/admin.js"></script>
</head>
<body class="easyui-layout" data-options="fit:true">
<div data-options="region:'north'" style="height:40px">
<div style="margin-top: 5px">
用户名:<input type="text" id="aname"/>
<input type="button" id="searchBtn" value="搜索"/>
</div>
</div>
<div data-options="region:'center',fit:true">
<table id="dg"></table>
</div>
<!-- 用户的添加对话框开始 -->
<div id="adddlg" style="width:400px">
<div style="padding:10px 60px 20px 60px">
<form id="addff" class="easyui-form" method="post"
data-options="novalidate:false">
<table cellpadding="5">
<tr>
<td>用户名:</td>
<td><input class="easyui-textbox" type="text" name="name"
data-options="required:true,validType:{checkName:[]}" ></input></td>
</tr>
<tr>
<td>密码:</td>
<td><input class="easyui-textbox" name="pass"
data-options="required:true" ></input></td>
</tr>
</table>
</form>
</div>
</div>
<!-- 用户的添加对话框结束 -->
<!--用户的更新对话框开始 -->
<div id="updatedlg" style="width:400px">
<div style="padding:10px 60px 20px 60px">
<form id="updateff" class="easyui-form" method="post"
data-options="novalidate:false">
<table cellpadding="5">
<input type="hidden" name="id"/>
<tr>
<td>用户名:</td>
<td><input class="easyui-textbox" type="text" name="name"
data-options="required:true"></input></td>
</tr>
<tr>
<td>密码:</td>
<td><input class="easyui-textbox" name="pass"
data-options="required:true" ></input></td>
</tr>
</table>
</form>
</div>
</div>
<!-- 类别的更新对话框结束 -->
</body>
admin.js
// 搜索的地址
var searchUrl = "./hytc/adminAction_select.action"; // page=3
var saveUrl = "./hytc/adminAction_save.action";
var deleteUrl = "./hytc/adminAction_delete.action";
var updateUrl = "./hytc/adminAction_update.action";
//查询条件
var queryParams = null;
// 当文档加载完毕,然后触发该匿名函数
$(document).ready(function() {
initDialog();
// 初始化数据
initData();
//获取按钮对象
var $searchBtn=$("#searchBtn");
//注册事件
$searchBtn.click(function(){
//获取输入的条件值
var value=$("#aname").val();
//查询条件
queryParams={name:value};
//重新初始化数据
initData();
});
});
/**
* 初始化对话框
*/
function initDialog() {
$('#adddlg').dialog({
title : '添加用户',
width : 400,
closed : true,
cache : false,
modal : true,
buttons : [ {
text : '添加',
iconCls : 'icon-ok',
handler : function() {
// 调用添加的方法
submitAddForm();
}
}, {
text : '取消',
iconCls : 'icon-cancel',
handler : function() {
// 取消添加，关闭对话框
$('#adddlg').dialog('close');
}
} ]
});
//更新用户
$('#updatedlg').dialog({
title : '更新用户',
width : 400,
closed : true,
cache : false,
modal : true,
buttons : [ {
text : '更新',
iconCls : 'icon-ok',
handler : function() {
// 调用更新的方法
submitUpdateForm();
}
}, {
text : '取消',
iconCls : 'icon-cancel',
handler : function() {
// 取消更新，关闭对话框
$('#updatedlg').dialog('close');
}
} ]
});
}
/**
* 初始化数据
*/
function initData() {
// 显示数据
$('#dg').datagrid({
url : searchUrl, // 请求的url地址 每次请求都会附带 page:当前页,page=3&rows=10;
// rows:每页显示记录数
queryParams : queryParams,
method : "post", // 请求的方式
//height:300,
pageSize : 3, // 每页显示的数量
pageList : [ 3, 5, 10, 15 ], // 可选的每页显示的数量的集合
pagination : true, // 添加分页效果
loadMsg : "正在加载数据，请稍候",
singleSelect : false, // 可以选择多行
columns : [ [ {
field : 'cbk',
title : "全选",
width : 100,
checkbox : true
}, {
field : "id",
title : "序号",
width : 100
}, {
field : "name",
title : "用户名称",
width : 100
},
{
field : "pass",
title : "密码",
width : 100,
align : "right"
} ] ],
toolbar : [ {
iconCls : "icon-add",
text : "添加用户",
handler : function() {
// 调用添加用户的函数
newObject();
$('#selectrole').combobox({
url :selectRoleUrl,
valueField : 'id',
textField : 'name',
loadFilter:function(data){
return data.roles;
}
});
}
}, {
iconCls : "icon-edit",
text : "编辑用户",
handler : function() {
editObject();// 调用编辑方法
}
},
{
iconCls : "icon-remove",
text : "删除用户",
handler : function() {
deleteObject();
}
}, {
iconCls : "icon-help",
text:"帮助",
handler : function() {
alert("帮助按钮");
}
} ],
});
// 通过getPager方法 获取分页的对象
var pager = $("#dg").datagrid("getPager");
// 重新设置分页对象的值
pager.pagination({
pageSize : 3,// 每页显示的数量
pageList : [ 3, 5, 10, 15 ],// 可选的每页显示的数量的集合
beforePageText : "当前页", // 文本
afterPageText : "共{pages}页", // 文本
displayMsg : "当前页从{from}到{to}共{total}记录"// 文本
});
}
// 添加用户
function newObject() {
// 清空form表单
$('#addff').form('clear');
// 打开添加的对话框
$('#adddlg').dialog('open');
}
// 提交对话框中的form表单，完成用户的添加
function submitAddForm() {
$('#addff').form({
url : saveUrl,
onSubmit : function() {
// do some check
// return false to prevent submit;
return $(this).form('validate');
},
success : function(data) {
if (data > 0) {
// 添加成功，关闭对话框
$('#adddlg').dialog('close');
$("#dg").datagrid("reload");
show("用户添加成功");
} else {
show("用户添加失败");
}
}
});
// submit the form
$('#addff').submit();
}
// 提交对话框中的form表单，完成用户的更新
function submitUpdateForm() {
$('#updateff').form({
url : updateUrl,
onSubmit : function() {
return $(this).form('validate');
},
success : function() {
// 更新成功，关闭对话框
$('#updatedlg').dialog('close');
$("#dg").datagrid("reload");
show("用户更新成功");
}
});
// submit the form
$('#updateff').submit();
}
// 获取多行
function getSelections() {
var ids = [];
// 获取选中的行
var rows = $('#dg').datagrid('getSelections');
// 遍历选中的行
for (var i = 0; i < rows.length; i++) {
// 得到具体的行对象
var row = rows[i];
// 得到该行的id值，存入到ids数组中
ids.push(row.id);
}
return ids;
}
// 删除用户
function deleteObject() {
// 获取要删除行对应id的集合
var ids = getSelections();
if (ids.length == 0) {
show("请选择要删除的用户");
} else {
$.messager.confirm('确认','你确定要删除该用户信息吗？',function(r){
if(r){
// 发送ajax请求
$.post(deleteUrl, {
ids : ids.join(",")
}, function(data) {
// 重新加载datagrid数据
$("#dg").datagrid("reload");
show("用户删除成功");
}, "json");
}else{
show("取消删除操作");
}
});
}
}
// 编辑用户
function editObject() {
// 获取选中的所有的行
var rows = $('#dg').datagrid('getSelections');
// 判断rows大小
if (rows.length == 0) {
show("请选择要编辑的用户");
} else if (rows.length == 1) {
var row = rows[0];// 获取选中行的对象
// 重新加载form表单数据
loadLocal(row);
$('#updatedlg').dialog('open');
} else {
show("请选择单行");
}
/* var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','Edit User');
$('#fm').form('load',row); url = 'update_user.php?id='+row.id; }*/
}
/**
* 重新加载方法
* @param row
*/
function loadLocal(row) {
$('#updateff').form('load', {
id : row.id,
name : row.name,
pass : row.pass,
});
}
//弹出消息框
function show(msg) {
$.messager.show({
// 高度
height : 80,
// 消息框的标题
title : "信息提示",
msg : msg,
// 消息框弹出的样式
showType : 'slide',
// 居中弹出消息框
style : {
right : '',
top : document.body.scrollTop + document.documentElement.scrollTop
+ 200,
bottom : ''
},
// 设置消息框的过期时间
timeout : 600
});
}
