common.jsp 导入的是jQuery-easyui ：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
User.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/common/common.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>用户管理</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
$(function(){
$("#u_dg").datagrid({
idField :'userId',
title : '用户管理',
iconCls:'icon-userManage',
striped :true,
loadMsg : '数据正在加载中，请稍后.....',
url : '${pageContext.request.contextPath}/user?method=list' ,
fit : true,
fitColumns : true,
striped :true, //隔行变色
rownumbers : true,
height:300,
columns:[[
{
field : 'ck',
checkbox : true
},{
field : 'userId',
title : '编号',
width : 80,
align:'center'
},{
field : 'userName',
title : '用户名',
width : 150,
align:'center'
},{
field : 'password',
title : '用户密码',
width : 150,
align:'center'
},{
field : 'roleName',
title : '角色',
width : 150,
align:'center'
},{
field : 'userDescription',
title : '用户描述',
width : 300,
align:'center'
}
]
],
//分页
pagination:true,
pageSize : 10,
pageList:[5,10,15,20,25,30]
});
// 双击选择角色
$('#role_datagrid').datagrid({
onDblClickRow:function(index,row){
// 获取文本框
$('#roleName').val(row.roleName);
// 设置隐藏域
$('#roleId').val(row.roleId);
//关闭dialog
$("#r_dialog").dialog('close');
}
});
});
// 查询
function searchRole(){
//获取值
var userName = $("#s_userName").val();
var s_roleId = $("#s_roleId").combobox('getValue');
//提交表单，查询，dataGrid有个方法，直接向服务器发送请求
$("#u_dg").datagrid('load',{
s_userName : userName,
s_roleId : s_roleId
});
}
var url;
// 保存用户Dialog
function saveOpenDialog(){
url='${pageContext.request.contextPath }/user?method=save';
$("#myform").form("clear");
$('#u_dialog').dialog("setTitle",' 添加用户').dialog('center').dialog('open');
}
// 编辑用户Dialog
function editOpenDialog(){
var selected = $('#u_dg').datagrid('getSelections');
if(selected.length!=1){
$.messager.alert('系统消息','您只能选择<font color=red>1</font>个用户进行修改!','info');
return ;
}
url='${pageContext.request.contextPath }/user?method=update'
//清空表单
$('#myform').form('clear');
// 填充表单数据
$('#myform').form('load',{
userId:selected[0].userId,
roleId:selected[0].roleId,
roleName:selected[0].roleName,
userName:selected[0].userName,
password:selected[0].password,
userDescription:selected[0].userDescription
});
$('#u_dialog').dialog("setTitle",' 编辑用户').dialog('center').dialog('open');
}
// 删除用户
function deleteUser(){
var selected = $('#u_dg').datagrid('getSelections');
//window.alert(selected.length);
if(selected.length < 1){
$.messager.alert('系统消息','请您选择要删除的用户数据!','info');
return;
}
url='${pageContext.request.contextPath }/user?method=delete';
//构造userId
var userArr = [];
for(var i = 0 ;i <selected.length;i++){
userArr.push(selected[i].userId);
}
var userIds = userArr.join(',');
$.messager.confirm('系统提示信息','您确认要删除选择的用户吗?',function(r){
if(r){
//发送ajax请求道服务器
$.ajax({
type:"post",
url:url,
data:{userIds:userIds},
cache:false,
dataType:'json',
success:function(r){
// 刷新当前数据表格
$('#u_dg').datagrid('reload');
// 清空idField(这一步，一定要做)
$('#u_dg').datagrid('unselectAll');
$.messager.show({
title : '系统消息',
msg : r.msg
});
},
error : function(r){
$.messager.show({
title : '系统消息',
msg : r.msg
});
}
});
}
});
}
// 关闭添加用户 Dialog
function closeDialog(){
$("#myform").form("clear");
$('#u_dialog').dialog("close");
}
// 选择角色
function openRoleDialog(){
$("#r_dialog").dialog('center').dialog('open');
}
// 获取角色的值
function getSelectRole(){
var selectObj = $("#role_datagrid").datagrid('getSelected');
if(selectObj == null){
$.messager.alert('系统消息','至少选择一个角色!','info');
return ;
}
var roleName = selectObj.roleName;
var roleId = selectObj.roleId;
// 获取文本框
$('#roleName').val(roleName);
// 设置隐藏域
$('#roleId').val(roleId);
//关闭dialog
$("#r_dialog").dialog('close');
}
// 提交表单
function doSubmit(){
// form表单验证
if ( !$('#myform').form('validate')){
$.messager.alert('系统消息','请将信息填写完整!','info');
return ;
}
//发送ajax请求
$.ajax({
type:"post",
url:url,
data:$("#myform").serialize(),
cache:false,
dataType:'json',
success:function(r){
// 刷新当前数据表格
$('#u_dg').datagrid('reload');
$.messager.show({
title : '系统消息',
msg : r.msg
});
},
error : function(r){
$.messager.show({
title : '系统消息',
msg : r.msg
});
}
});
// 关闭dialog
$('#u_dialog').dialog('close');
}
// 查询角色
function serachRoleName(){
var s_roleName = $('#rn').val();
$("#role_datagrid").datagrid('load',{
s_roleName : s_roleName
});
}
// 关闭角色窗口
function closeRoleDialog(){
$("#r_dialog").dialog('close');
}
</script>
</head>
<body style="margin: 0 auto;padding: 0px;">
<!-- 数据 -->
<table id="u_dg" toolbar="#utbar"></table>
<!-- toolbar工具栏 -->
<div id="utbar">
<div>
<a href="javascript:saveOpenDialog()" class="easyui-linkbutton" iconCls='icon-add' plain="true">添加</a>
<a href="javascript:editOpenDialog()" class="easyui-linkbutton" iconCls='icon-edit' plain="true" >编辑</a>
<a href="javascript:deleteUser()" class="easyui-linkbutton" iconCls='icon-remove' plain="true" >删除</a>
</div>
<div style="margin-left: 5px">
用户名 ： <input type="text" name="s_userName" id="s_userName" οnkeydοwn="if(event.keyCode==13) searchRole()">
用户角色：<input class="easyui-combobox" id="s_roleId" name="s_roleId" editable="false" panelHeight="auto" url="role?method=findAll" valueField="roleId" textField="roleName" >
<a href="javascript:searchRole()" class="easyui-linkbutton" iconCls='icon-search' plain="true" >查询</a>
</div>
</div>
<!-- 添加用户dialog -->
<div id="u_dialog" class="easyui-dialog" iconCls="icon-userManage" modal="true" style="width: 570px;height: 350px;padding: 10px 20px" closed="true" buttons="#addbtn">
<form action="" method="post" id="myform">
<input type="hidden" id="roleId" name="roleId"/>
<input type="hidden" id="userId" name="userId">
<table cellspacing="5px;" style="font-size: 12px">
<tr>
<td>用户名：</td>
<td><input type="text" id="userName" name="userName" class="easyui-validatebox" required="true"/></td>
<td> </td>
<td>用户密码：</td>
<td><input type="password" id="password" name="password" class="easyui-validatebox" required="true"/></td>
</tr>
<tr>
<td>角色名称：</td>
<td><input disabled="disabled" type="text" id="roleName" name="roleName" class="easyui-validatebox" required="true"/></td>
<td> </td>
<td colspan="2"><a href="javascript:openRoleDialog()" class="easyui-linkbutton" >选择角色</a></td>
</tr>
<tr>
<td valign="top">备注：</td>
<td colspan="4">
<textarea rows="7" cols="50" name="userDescription" id="userDescription"></textarea>
</td>
</tr>
</table>
</form>
</div>
<div id="addbtn">
<a href="javascript:doSubmit()" class="easyui-linkbutton" iconCls='icon-add'>确定</a>
<a href="javascript:closeDialog()" class="easyui-linkbutton" iconCls='icon-cancel'>关闭</a>
</div>
<!-- 选择角色 -->
<div id="r_dialog" class="easyui-dialog" modal="true" style="width: 500px;height: 480px;padding:5px" iconCls="icon-search" closed="true" buttons="#selectRoleBtn" title="选择角色" >
<form action="" id="rform" method="post">
<div style=" height: 40px; line-height: 40px;">
角色查询：<input type="text" id="rn" name="s_roleName" value="" οnkeydοwn="if(event.keyCode==13) serachRoleName()" >
<a href="javascript:serachRoleName()" class="easyui-linkbutton" iconCls="icon-search" plain="true">查询</a>
</div>
<div style="height: 350px;">
<!-- 角色数据列表 -->
<table id="role_datagrid" title="角色列表" iconCls="icon-ok" class="easyui-datagrid" fitColumns="true" rownumbers="true" url="role?method=list" singleSelect="true" fit="true" pagination="true" pageList="[5,10,15,20,25,30]">
<thead>
<tr>
<th field="roleName" width="50" align="center">角色名称</th>
<th field="roleDescription" width="100" align="center">角色描述</th>
</tr>
</thead>
</table>
</div>
</form>
</div>
<div id="selectRoleBtn">
<a href="javascript:getSelectRole()" class="easyui-linkbutton" iconCls='icon-add'>确定</a>
<a href="javascript:closeRoleDialog()" class="easyui-linkbutton" iconCls='icon-cancel'>关闭</a>
</div>
</body>
</html>
112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
