仅供参考,不可转载,如遇其他情况概不负责,后果自负,切记
该项目运用的技术:spring+springMVC+ibatis
本网页只有一个页面,包过信息的增、删、改、查功能,只有部分代码,仅供参考
因该项目比较大,所以仅提供了一个页面内的增删改查,用到的数据表有用户表、角色表、用户角色表三张表来实现。
在这里面只有前端的jsp与后端的Controller,没有service以及serviceImpl,可在java实现信息的增删改查功能的网页设计(2)里面查看。
- 整体页面的效果图演示
该页面是这个网页的连接的整体效果图,主要分为两个部分:1、左边的部门树,2、右边的信息查询页面。
右边的信息查询页面包括两个部分,1、用户查询2、实现用户列表的查询以及实现增删改查的功能。
整体页面的jsp代码:
左边的树,页面显示的数据是从session缓存好的数据里面直接取出来的
<%@page import="com.hyjx.framework.service.UserCenterService"%>
<%@page import="com.hyjx.framework.uc.user.UserInfo"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String userOrgCode=UserCenterService.getCurrentUserInfo().getDataOrgCode();
String userIsAdmin=UserCenterService.getCurrentUserInfo().getUserIsAdmin();
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<jsp:include page="/component/publicpage/header.jsp" ></jsp:include>
<script type="text/javascript">
$(function() {
var rootId=$("#rootNodeId").val();
$('#tree').orgtree({
rootid:'<%=userOrgCode == null?"":userOrgCode%>',
departtype:'2',
onclick:function(node){
$("#currentNodeId").val(node['attributes']);
$("#currentNodeCode").val(node['code']);
var url = '<%=basePath%>text/goUserList.xhtml?departCode='+node.code+'&orgCode='+node.attributes;
$("#treeFrame").attr("src",url);
},
onloadsuccess:function () {
var n = $("#tree").tree("getSelected");
$("#_easyui_tree_1").addClass("tree-node-selected");
if(n!=null){
$("#currentNodeCode").val(n.code);
$("#currentNodeId").val(n.id);
$("#rootNodeId").val($("#currentNodeId").val());
}
}
});
var url = '<%=basePath%>text/goUserList.xhtml?departCode=<%=userOrgCode%>&orgCode=<%=userOrgCode%>';
$("#treeFrame").attr("src",url);
});
</script>
</head>
<body>
<!-- 左侧树 begin-->
<div class="left-tree">
<h2></h2>
<input type="hidden" id="rootNodeId" value="<c:out value="${userOrgCode}"/>"/>
<input type="hidden" id="currentNodeCode"/>
<input type="hidden" id="currentNodeId"/>
<!-- 此处是树 -->
<h3 class="easyui-tree-title">部门树</h3>
<ul class="easyui-tree" id="tree">
</ul>
</div>
<!-- 左侧树 end-->
<!-- 右侧div or 右侧iframe(只需加class="right-area") -->
<iframe class="right-area" name="treeFrame" id="treeFrame" src="" frameborder="0" allowtransparency="true" ></iframe>
</body>
</html>
页面的右半部分是页面最主要的体现,实现数据的增删改查的功能。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<jsp:include page="/component/publicpage/header.jsp"></jsp:include>
<title>查询条件和查询结果列表</title>
<script type="text/javascript">
//清空
function clearAll()
{
$("#userAccount").textbox('setValue','');
$("#userName").textbox('setValue','');
$("#includChild").val("1");
$("#includChildBox").get(0).checked=true;
}
//添加
function add()
{
var orgCode=$("#orgCode").val();
var departCode=$("#departCode").val();
openWinW('<%=basePath%>text/goAdd.xhtml?optType=1&orgCode='+orgCode+'&departCode='+departCode, '添加用户', '900px', '530px', true, false);
}
//修改
function edit(id)
{
openWinW('<%=basePath%>text/goAdd.xhtml?optType=2&userId='+id, '修改用户', '900px', '530px', true, false);
}
function gotoImport()
{
openWinW('<%=basePath%>common/goImport.xhtml?en_module_name=user', '用户信息导入', '900px', '600px', true, false);
}
//删除
function del(id,name)
{
$.hyjx.confirm("提示信息","确定要删除【"+name+"】吗?",function(result){
if(result == true){
$.ajax({
url: "<%=basePath %>text/goDelete.xhtml?ids="+id,
success: function(msg){
if("success" == msg) {
$('#tt').datagrid("reload");
$.hyjx.alert("提示","删除操作成功!","info", function(){ });
}else {
$.hyjx.alert("提示","删除失败,请重试!","info", function(){ });
}
}
});
}
});
}
//查看详情
function view(v)
{
openWinW('<%=basePath%>text/goView.xhtml?user_id='+v, '查看详细', '900px', '600px', true, false);
}
var tabs_iframeheight = 0;
function query()
{
if(!$("#form1").form('validate')){
return;
}
if ($("#includChildBox").get(0).checked){
$("#includChild").val("1");
}else{
$("#includChild").val("0");
}
var data = $("#form1").serialize();
$('#tt').datagrid({
//是引入绝对路径,相对路径不在起作用
url:'<%=basePath %>text/queryUserList.xhtml',
queryParams:data,//在请求远程数据的时候发送额外的参数
rownumbers: true,//如果为true,则显示一个行号列。
pageNumber: 1,
//加载完成后回调
onLoadSuccess: function(data) {
if(uiLayout=='1'){
//Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
//document.body.scrollHeight获取高度
//scrollHeight是一个容器内的滚动内容(不是可视内容)的高度
//获得A页面的实际高度,在跳转到b时改变框架的高度为A的实际高度
var height = Math.max(document.body.scrollHeight,$(".left-tree",parent.document).height());
parent.document.getElementById("treeFrame").style.height = height+"px";
parent.parent.document.getElementById("rightFrame").style.height =(height+50) +"px";
}
},
columns:[[
{field:'user_account',title:'登录名',width:'15%',sortable:true},
{field:'user_name',title:'姓名',width:'10%',align:'left',sortable:true},
{field:'user_sex',title:'性别',width:'5%',align:'left',sortable:true,formatter:function(value, rowData, rowIndex){
if(value == "M")
{
return "男";
}else if(value == "F")
{
return "女";
}
}},
{field:'departName',title:'所属部门',width:'25%',align:'left',sortable:false},
{field:'mobile',title:'手机',width:'12%',align:'left',sortable:true},
{field:'validity',title:'是否有效',width:'10%',align:'left',sortable:true,formatter:function(value, rowData, rowIndex){
if(value=="Y") return "是";
else return "否";
}},
{field:'user_id',title:'操作',width:140,
formatter: function (value, rowData, rowIndex) {
return "<span title=查看 class=btn-view οnclick=view("+"\'"+value+"\'"+")></span>"+
"<span title=编辑 class=btn-edit οnclick=edit("+"\'"+value+"\'"+")></span>"+
"<span title=删除 class=btn-delete οnclick=del("+"\'"+value+"\','"+rowData.user_name+"'"+")></span>";
}
}
]]
});
}
$(document).ready(function(){
query();
});
function setNodeId(id){
$("#depart_code").val(id);
}
</script>
</head>
<body>
<div class="content" style="margin: 0">
<!-- 查询条件列表 -->
<h1 class="public-title"><b>用户查询</b></h1>
<form id="form1" class="query-list" name="form1" method="post" action="" data-options="novalidate:true">
<input type="hidden" id="orgCode" name="orgCode" value="<c:out value="${bean.orgCode}"/>"/>
<input type="hidden" id="departCode" name="departCode" value="<c:out value="${bean.departCode}"/>"/>
<input type="hidden" id="includChild" name="includChild" value="1"/>
<!-- query table -->
<table class="table-query">
<tbody>
<tr>
<th >登录名</th>
<td ><input class="easyui-textbox" type="text" name="userAccount" id="userAccount" data-options="validType:['length[0,10]']"/></td>
<th >姓名</th>
<td ><input class="easyui-textbox" type="text" name="userName" id="userName" data-options="validType:['length[0,10]']"/></td>
<th ></th>
<td ><label><input type="checkbox" name="includChildBox" id="includChildBox" checked="checked"/>包含下级</label></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6" >
<button class="btn btn-info" type="button" onclick="query()">查 询</button>
<button class="btn" onclick="clearAll();" type="button">清 空</button>
</td>
</tr>
</tfoot>
</table>
</form>
<!-- 查询结果列表 -->
<div class="result-list">
<h1 class="title"><b>用户列表</b></h1>
<div id="tb" class="operate">
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="add()">添加</a>
</div>
<table id="tt" class="easyui-datagrid"></table>
</div>
</div>
</body>
</html>
页面跳转的后台
Controler
@Controller
@RequestMapping("/text")
public class TextController {
@Autowired
private User1Service service;
@Autowired
private RoleService roleService;
//跳转到右边的查询页面
@RequestMapping("goUserList")
@ResponseBody
public ModelAndView goUserList(HttpServletRequest request) {
String departCode = request.getParameter("departCode");
String orgCode = request.getParameter("orgCode");
User1Bean bean = new User1Bean();
bean.setOrgCode(orgCode);
bean.setDepartCode(departCode);
bean.setIsOrg("1");
ModelAndView mav = new ModelAndView("/framework/uc/text/userlist");
mav.addObject("bean", bean);
return mav;
}
//跳转到主页面
@RequestMapping("goList")
public ModelAndView goList() {
ModelAndView mav = new ModelAndView("/framework/uc/text/list");
mav.addObject("userOrgCode", UserCenterService.getCurrentUserInfo().getDataOrgCode());
return mav;
}
//查询右边页面的数据
@RequestMapping(value="queryUserList", produces = "application/json; charset=utf-8")
@ResponseBody
public String queryUserList(User1Bean bean) {
return service.getUsers1(bean);
}
2.查询页面
根据条件查询
jsp页面
<%@page import="com.hyjx.framework.service.UserCenterService"%>
<%@page import="com.hyjx.framework.uc.user.UserInfo"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String userOrgCode=UserCenterService.getCurrentUserOrgCode();
String userIsAdmin=UserCenterService.getCurrentUserInfo().getUserIsAdmin();
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<jsp:include page="/component/publicpage/header.jsp" ></jsp:include>
<title>人员层</title>
<style>
.datagrid-header td, .datagrid-body td, .datagrid-footer td{
border-left: none;
border-right: none;
}
</style>
<script type="text/javascript">
var selectedUsers = {};
function onOrgTreeClick(node){
$("#departCode").val(node['attributes']);
$("#orgCode").val(node['code']);
query();
}
$(function() {
query();
});
function clearAll()
{
$("#userAccount").textbox('setValue','');
$("#userName").textbox('setValue','');
$("#includChild").val("1");
$("#includChildBox").get(0).checked=true;
}
function ok()
{
window.parent.parent.closeWin('选择用户',selectedUsers);
}
function JSONLength(obj) {
var size = 0, key;
for (key in obj) {
if (obj.hasOwnProperty(key)) size++;
}
return size;
};
function query()
{
if ($("#includChildBox").get(0).checked){
$("#includChild").val("1");
}else{
$("#includChild").val("0");
}
var data = $("#form1").serialize();
$('#tt').datagrid({
url:'<%=basePath %>text/queryUserList.xhtml',
queryParams:data,
rownumbers: true,
pageNumber: 1,
columns:[[
{field:'user_account',title:'登录名',width:'35%',align:'left',sortable:true},
{field:'user_name',title:'用户名',width:'35%',align:'left',sortable:true},
{field:'user_sex',title:'性别',width:'25%',align:'left',sortable:true,formatter:function(value, rowData, rowIndex){
if(value == "M")
{
return "男";
}else if(value == "F")
{
return "女";
}
}}
]],
onDblClickRow: function (rowIndex, rowData) {
var userId=rowData.user_id;
var userName=rowData.user_name;
selectedUsers[userId]=rowData;
var insertHtml1='<p>'+userName+'<button class="btn-close" id="'+userId+'"></button></p>';
$('.orange-border').find('.label-content').append(insertHtml1);
// 点击叉号,移除已选区的该标签
$('#'+userId).on('click',function() {
$(this).parent('p').remove();
delete selectedUsers[userId];
});
}
});
}
</script>
</head>
<body style="background-color: #fff">
<table border="0" width="100%" cellspacing="15px">
<tr>
<td rowspan="2" width="200px" height="100%" valign="top" class="theme-border">
<ul id="tree" class="hy-orgtree" departtype="2" onclick="onOrgTreeClick" />
</td>
<td rowspan="2" class="theme-border">
<h1 class="public-title"><b>用户查询</b></h1>
<form id="form1" class="query-list" name="form1" method="post" action="" data-options="novalidate:true">
<input type="hidden" id="orgCode" name="orgCode" value="<c:out value="${bean.orgCode}"/>"/>
<input type="hidden" id="departCode" name="departCode" value="<c:out value="${bean.departCode}"/>"/>
<input type="hidden" id="includChild" name="includChild" value="1"/>
<input type="hidden" id="userIsAdmin" name="userIsAdmin" value="0">
<input type="hidden" id="levelId" name="levelId" >
<!-- query table -->
<table class="table-query">
<tbody>
<tr>
<td colspan="4">
<label><input type="checkbox" name="includChildBox" id="includChildBox" checked="checked"/>包含下级</label>
</td>
</tr>
<tr>
<th >用户姓名</th>
<td ><input class="easyui-textbox" type="text" name="userName" id="userName" style="width:150px;"/></td>
<th >登录名</th>
<td ><input class="easyui-textbox" type="text" name="userAccount" id="userAccount" style="width:150px;"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" >
<button class="btn btn-sm btn-info" type="button" onclick="query()">查 询</button>
<button class="btn btn-sm" onclick="clearAll();" type="button">清 空</button>
</td>
</tr>
</tfoot>
</table>
</form>
<!-- 查询结果列表 -->
<div class="result-list">
<h1 class="title"><b>用户查询列表(双击选择)</b></h1>
<table id="tt" class="easyui-datagrid"></table>
</div>
</div>
</td>
<td width="230px" valign="top" style="position:relative;" class="orange-border">
<h4 class="headline">
已选用户
</h4>
<div class="label-content">
</div>
</td>
</tr>
<tr>
<td align="center" height="30px">
<button class="btn btn-info" style="width: 100%;margin: 0;font-size: 16px;" onclick="ok();" type="button">确 定</button>
</td>
</tr>
</table>
</body>
</html>
后台Controller
//页面
@RequestMapping("goSelectList")
@ResponseBody
public ModelAndView goSelectList(HttpServletRequest request)
{
String orgCode = request.getParameter("orgCode");
if (orgCode == null) {
orgCode = UserCenterService.getCurrentUserInfo().getOrg_code();
}
String departCode =orgCode;
User1Bean bean = new User1Bean();
bean.setOrgCode(orgCode);
bean.setDepartCode(departCode);
ModelAndView mav = new ModelAndView("/framework/uc/text/selestlist");
mav.addObject("bean", bean);
return mav;
}
- 增加页面
效果图
jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>编辑</title>
<jsp:include page="/component/publicpage/header.jsp"></jsp:include>
<jsp:include page="/component/publicpage/layPreview.jsp"></jsp:include>
</head>
<body>
<form id="form1" class="query-list" method="post" action="" data-options="novalidate:true" >
<input type="hidden" value="<c:out value="${model.pwdOld }"/>" id="pwdOld" name="pwdOld">
<input type="hidden" value="<c:out value="${optType }"/>" id="optType" name="optType">
<input type="hidden" name="user_id" id="user_id" value="<c:out value="${model.user_id}"/>">
<input type="hidden" name="roleIds" id="roleIds" value="<c:out value="${model.roleIds}"/>">
<input type="hidden" name="org_code" id="org_code" value="<c:out value="${model.org_code}"/>">
<input type="hidden" name="depart_code" id="depart_code" value="<c:out value="${model.depart_code}"/>">
<input type="hidden" name="picture_name" id="picture_name" value="<c:out value="${model.picture_name}"/>">
<input type="hidden" value="<c:out value="${model.orgRoles }"/>" id="orgRoles" name="orgRoles">
<table class="table-query">
<tr>
<th width="15%">单位</th>
<td width="30%">
<c:out value="${model.orgName }"/>
</td>
<th width="15%">部门</th>
<td width="30%">
<c:out value="${model.departName }"/>
</td>
<td></td>
</tr>
<tr>
<th width="15%">登录名</th><td width="30%">
<input class="easyui-textbox" type="text" required="true" name="user_account" value="<c:out value="${model.user_account }"/>" validType="length[0,10]"/>
</td>
<th width="15%">密码</th><td width="30%"><input class="easyui-textbox" type="password" id="user_pwd" name="user_pwd"
validType="length[4,10]" /></td>
<td rowspan="4" valign="middle" align="center">
<div style="display: none;" class="hy-imageupload" id="pic1" imgid="aaa" edit="1" filename="<c:out value="${model.picture_name}"/>" picture_name="picture_name" vchr_entityid="<c:out value="${model.user_id }"/>"></div>
</td>
</tr>
<tr>
<th width="15%">姓名</th><td width="30%">
<input name="user_name" class="easyui-textbox" type="text" required="true" value="<c:out value="${model.user_name }"/>" validType="length[0,10]"/></td>
<th width="15%">性别</th>
<td width="30%">
<input type="hidden" value="<c:out value="${model.user_sex }"/>" id="sexHidden">
<label><input type="radio" name="user_sex" value="M"/> 男</label>
<label><input type="radio" name="user_sex" value="F"/> 女</label>
</td>
</tr>
<tr>
<th width="15%">移动电话</th><td width="30%"><input name="mobile" class="easyui-textbox" type="text" value="<c:out value="${model.mobile }"/>" data-options="validType:'mobile'"/> </td>
<th width="15%">电子邮件</th><td width="30%"><input name="email" class="easyui-textbox" type="text" data-options="validType:['email','length[1,30]']" value="<c:out value="${model.email }"/>"/> </td>
</tr>
<tr>
<th width="15%">办公电话</th><td width="30%"><input name="office_tel" class="easyui-textbox" type="text" value="<c:out value="${model.office_tel }"/>" data-options="validType:'phonenumber'"/></td>
<th width="15%">传真</th><td width="30%">
<input name="office_fax" class="easyui-textbox" type="text" value="<c:out value="${model.office_fax }"/>" data-options="validType:'cznumber'"/>
</td>
</tr>
<tr>
<th width="15%">是否有效</th>
<td colspan="4">
<input type="hidden" value="<c:out value="${model.validity }"/>" id="validityHidden">
<label><input type="radio" name="validity" value="Y"/> 是</label>
<label><input type="radio" name="validity" value="N"/> 否</label>
</td>
</tr>
<tr>
<th>用户对应角色</th>
<td colspan="4">
<!-- 标签选择区 begin -->
<div class="selectArea">
<!-- 左侧:已选标签 -->
<div class="selectArea-left">
<h4 class="headline">备选角色(双击选择)</h4>
<div class="page-content">
</div>
</div>
<!-- 右侧:已选标签 -->
<div class="selectArea-right">
<h4 class="headline">
已选角色
<!-- <p class="nav1">
<span class="active">全部</span>/<span>功能</span>/<span>数据</span>
</p>
<img class="img-btn" src="<%=basePath%>images/icon-search2.png" alt="搜索按钮"/>
-->
</h4>
<div class="page-content">
</div>
<!-- <div class="page-buttons">
<img class="last-page" src="images/last-page.png" title="上一页"/>
<img class="next-page" src="images/next-page.png" title="下一页"/>
</div> -->
</div>
</div>
<!-- 标签选择区 end-->
</td>
</tr>
<extfield:extfield tableName="sys_right_user" dataId="${model.user_id}" pkName="user_id" operateType="${optType}"/>
</table>
<table class="table-list" style="width: 100%">
<tr>
<td colspan="4" align="center" >
<center>
<input type="button" class="btn btn-info" onclick="save();" value="保 存" />
<input type="button" class="btn" onclick="closeLayer();" value="关 闭" />
</center>
</td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript">
function closeLayer()
{
var layerTitle='添加用户';
if($("#optType").val()=='2'){
layerTitle='修改用户';
}
window.parent.parent.closeWin(layerTitle);
}
$(function(){
var ck=$("#sexHidden").val();
$("input[name='user_sex'][value='"+ck+"']").attr("checked",true);
ck=$("#validityHidden").val();
$("input[name='validity'][value='"+ck+"']").attr("checked",true);
ck=$("#").val();
if(ck=='1'){
$("#user_pwd").attr("required","true");
}
var roleIds=$("#roleIds").val();
var orgRoles=$("#orgRoles").val();
var orgRoleJson=strToJson(orgRoles);
var roleId;
var strs= new Array();//定义一数组
strs=roleIds.split(","); //字符分割
//待选
for(var i=0; i<orgRoleJson.length; i++)
{
var roleName = orgRoleJson[i].name;
var roleId= orgRoleJson[i].id;
var index=roleIds.indexOf(roleId);
if(index<0){
var insertHtml2='<span class="label1">'+roleName+'<button class="btn-close" id="'+roleId+'"></button></span>'
$('.selectArea-left').find('.page-content').append(insertHtml2);
}
}
//已对应
for (i=0;i<strs.length ;i++ )
{
roleId=strs[i];
var roleName = getRoleName(roleId,orgRoleJson);
if(roleName!=''){
var insertHtml1='<span class="label1">'+roleName+'<button class="btn-close" id="'+roleId+'"></button></span>'
$('.selectArea-right').find('.page-content').append(insertHtml1);
}
}
// 双击待选区的标签时,从备选区移除
$('.selectArea-left').on('dblclick','.label1',function() {
var insertText1 = $(this).text();
var rid=$(this).find('.btn-close').attr('id');
var rIds=$("#roleIds").val();
$("#roleIds").val(rIds+","+rid);
var insertHtml1='<span class="label1">'+insertText1+'<button class="btn-close" id="'+rid+'"></button></span>'
$('.selectArea-right').find('.page-content').append(insertHtml1);
$(this).remove();
});
//page-content
// 点击叉号,移除已选区的该标签
$('.selectArea-right').on('click','.btn-close',function() {
var insertText2 = $(this).parent('.label1').text();
var rid=$(this).attr('id');
var insertHtml2='<span class="label1">'+insertText2+'<button class="btn-close" id="'+rid+'"></button></span>'
$('.selectArea-left').find('.page-content').append(insertHtml2);
$(this).parent('.label1').remove();
var rIds=$("#roleIds").val();
$("#roleIds").val(rIds.replace(','+rid,'').replace(rid,''));
});
});
function getRoleName(id,roleJsonArray){
for(var i=0; i<roleJsonArray.length; i++)
{
if(id==roleJsonArray[i].id){
return roleJsonArray[i].name;
}
}
return "";
}
//保存数据
function save()
{
if(!$("#form1").form('validate')){
return;
}
saveData();
}
function saveData(){
var url="<%=basePath%>text/doAdd.xhtml?optType=1";
if($("#optType").val()=='2'){
url="<%=basePath%>text/doEdit.xhtml?optType=2";
}
$.ajax({
url:url,
data:$("#form1").serialize(),
type:"post",
success:function(msg)
{
if("notunique"==msg){
$.hyjx.alert("提示信息","用户登录名已存在,不能重复添加","error", function(){});
}else if("success" == msg){
$.hyjx.alert("提示信息","保存成功!","info", function(){
parent.rightFrame.treeFrame.$('#tt').datagrid("reload");
closeLayer();
});
}else if("noadmin"==msg)
{
$.hyjx.alert("提示信息","不能使用admin作为登录名","error", function(){});
}
else{
$.hyjx.alert("提示信息","保存失败,请重试!","error", function(){});
}
},
error:function(msg){}
});
}
function strToJson(str){
return eval('('+str+')');
}
</script>
后台Controller
//添加页面
@RequestMapping(value = "goAdd", produces = "application/json; charset=utf-8")
@ResponseBody
public ModelAndView goAdd(HttpServletRequest request)
{
String optType = request.getParameter("optType");
String orgCode = null;
String departCode = null;
String userId = null;
User1Model model = null;
//System.out.println(equals(value));
if("2".equals(optType))
{
userId = request.getParameter("userId");
model = service.getUserById(userId);
String roleIds = service.getUserRole1Str(userId);
model.setRoleIds(roleIds);
model.setPwdOld(model.getUser_pwd());
orgCode = model.getOrg_code();
departCode = model.getDepart_code();
} else
{
orgCode = request.getParameter("orgCode");
departCode = request.getParameter("departCode");
model = new User1Model();
model.setDepart_code(departCode);
model.setOrg_code(orgCode);
model.setValidity("Y");
model.setUser_id(StringHelper.getPrimaryKey());
model.setCreate_time(new Date());
model.setUpdate_time(new Date());
}
model.setOrgName(RightManager.getOrgNameByCode(orgCode));
model.setDepartName(RightManager.getDepartByCode(departCode).getDepart_name());
List list = roleService.queryRoleListByOrgCode(orgCode);
StringBuffer sb = new StringBuffer();
//append() 方法在被选元素的结尾(仍然在内部)插入指定内容
sb.append("[");
for(int i = 0; i < list.size(); i++)
{
RoleModel rm = (RoleModel)list.get(i);
if(i == 0)
sb.append((new StringBuilder("{'id':'")).append(rm.getRole_id()).append("','name':'").append(rm.getRole_name()).append("'}").toString());
else
sb.append((new StringBuilder(",{'id':'")).append(rm.getRole_id()).append("','name':'").append(rm.getRole_name()).append("'}").toString());
}
sb.append("]");
model.setOrgRoles(sb.toString());
ModelAndView mav = new ModelAndView("/framework/uc/text/add");
mav.addObject("model", model);
mav.addObject("optType", optType);
return mav;
}
//添加信息
@RequestMapping(value = "doAdd", produces = "application/json; charset=utf-8")
@ResponseBody
public String doAdd(User1Model model)
{
IUserExtend userExtendService = (IUserExtend) SpringBeanUtil.getBean("userExtendService");
if (!userExtendService.isUserAccountUnique(model.getUser_id(), model.getUser_account()))
return "notunique";
if ("admin".equalsIgnoreCase(model.getUser_account()))
return "noadmin";
model.setCreate_time(new Date());
try {
model.setUser_pwd(MD5Helper.encrypt(model.getUser_pwd()));
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
}
IUserExtend userExtend = (IUserExtend)SpringBeanUtil.getBean("userExtendService");
//userExtend.beforeAdd(model);
if (service.add(model)) {
RightManager.init(4);
return "success";
}else {
return "failure";
}
}
- 查看详情页面
效果图
前台jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="/WEB-INF/tlds/ExtFieldTag.tld" prefix="extfield" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>编辑</title>
<jsp:include page="/component/publicpage/header.jsp"></jsp:include>
<jsp:include page="/component/publicpage/layPreview.jsp"></jsp:include>
</head>
<body>
<form id="form1" class="query-list" method="post" action="" data-options="novalidate:true" >
<input type="hidden" value="<c:out value="${model.pwdOld }"/>" id="pwdOld" name="pwdOld">
<input type="hidden" value="<c:out value="${optType }"/>" id="optType" name="optType">
<input type="hidden" name="user_id" id="user_id" value="<c:out value="${model.user_id}"/>">
<input type="hidden" name="roleIds" id="roleIds" value="<c:out value="${model.roleIds}"/>">
<input type="hidden" name="org_code" id="org_code" value="<c:out value="${model.org_code}"/>">
<input type="hidden" name="depart_code" id="depart_code" value="<c:out value="${model.depart_code}"/>">
<input type="hidden" name="picture_name" id="picture_name" value="<c:out value="${model.picture_name}"/>">
<input type="hidden" value="<c:out value="${model.orgRoles }"/>" id="orgRoles" name="orgRoles">
<table class="table-query">
<tr>
<th width="15%">单位</th>
<td width="30%">
<c:out value="${model.orgName }"/>
</td>
<th width="15%">部门</th>
<td width="30%">
<c:out value="${model.departName }"/>
</td>
<td></td>
</tr>
<tr>
<th >登录名</th>
<td colspan="3">
<c:out value="${model.user_account }"/>
</td>
<td rowspan="4" valign="middle" align="center">
<div id="aaa" ></div>
<div style="display:none;" class="previewImage" id="pic1" imgid="aaa" width="120" height="100"
filename="<%=basePath %>/upload/getPreview.xhtml?fileName=<c:out value="${model.picture_name}"/>"
></div>
</td>
</tr>
<tr>
<th >姓名</th>
<td >
<c:out value="${model.user_name }"/></td>
<th >性别<input type="hidden" id="user_sexHidden" value="<c:out value="${model.user_sex}" />"></th>
<td id="usersextd">
</td>
</tr>
<tr>
<th>移动电话</th>
<td>
<c:out value="${model.mobile }"/> </td>
<th>电子邮件</th>
<td>
<c:out value="${model.email }"/> </td>
</tr>
<tr>
<th>办公电话</th>
<td>
<c:out value="${model.office_tel }"/> </td>
<th>传真</th><td>
<c:out value="${model.office_fax }"/>
</td>
</tr>
<tr>
<th >是否有效
<input type="hidden" value="<c:out value="${model.validity }"/>" id="validityHidden">
</th>
<td colspan="4" id="validitytd">
</td>
</tr>
<tr>
<th>创建时间</th>
<td>
<fmt:formatDate value="${model.create_time}" pattern="yyyy-MM-dd HH:mm:ss" />
</td>
<th>更新时间</th><td>
<fmt:formatDate value="${model.update_time}" pattern="yyyy-MM-dd HH:mm:ss" />
</td>
</tr>
<extfield:extfield tableName="sys_right_user" dataId="${model.user_id}" pkName="user_id" operateType="3" />
<tr>
<th>用户对应角色</th>
<td colspan="4">
<div class="selectArea">
<div class="selectArea-left" style="width:97%;height: 180px;">
<div class="page-content">
</div>
</div>
</div>
</td>
</tr>
<tr>
<th >功能权限</th>
<td colspan="4">
<ul class="hy-menutree" checkedvalue="<c:out value="${model.menuCodes }"/>"
showOperate="1" checkbox="1" isreadonly="1" ></ul>
</td>
</tr>
<tr>
<th >数据权限</th>
<td colspan="4" style="border-top-style: solid;border-top-width: 1px;margin-top: 5px;border-top-color: gray;">
<ul id="datatree" class="hy-orgtree" checkedvalue="<c:out value="${model.orgCodes }"/>"
rootid="<c:out value="${model.org_code }"/>" isreadonly="1" multiselect="1"></ul>
</td>
</tr>
</table>
<table class="table-list" style="width: 100%">
<tr>
<td colspan="4" align="center" >
<center>
<button class="btn" onclick="closeLayer();" type="button">关 闭</button>
</center>
</td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript">
function closeLayer()
{
window.parent.parent.closeWin('查看详细');
}
var changeFlag=0;
$(function(){
var roleIds=$("#roleIds").val();
var orgRoles=$("#orgRoles").val();
var orgRoleJson=strToJson(orgRoles);
var roleId;
var strs= new Array();//定义一数组
strs=roleIds.split(","); //字符分割
//已对应
for (i=0;i<strs.length ;i++ )
{
roleId=strs[i];
var roleName = getRoleName(roleId,orgRoleJson);
if(roleName!=''){
var insertHtml1='<span class="label1">'+roleName+'<button class="btn-close" id="'+roleId+'"></button></span>'
$('.selectArea-left').find('.page-content').append(insertHtml1);
}
}
var vv=$("#validityHidden").val();
if(vv=='Y'){
$("#validitytd").html('是');
}else{
$("#validitytd").html('否');
}
vv=$("#user_sexHidden").val();
if(vv=='M'){
$("#usersextd").html('男');
}else if(vv=='F'){
$("#usersextd").html('女');
}
});
function getRoleName(id,roleJsonArray){
for(var i=0; i<roleJsonArray.length; i++)
{
if(id==roleJsonArray[i].id){
return roleJsonArray[i].name;
}
}
return "";
}
function strToJson(str){
return eval('('+str+')');
}
</script>
后台Controller
//查看详情
@RequestMapping(value = "goView", produces = "application/json; charset=utf-8")
@ResponseBody
public ModelAndView goView(HttpServletRequest request) {
String user_id = request.getParameter("user_id");
User1Model model = service.getUserById(user_id);
model.setOrgName(RightManager.getOrgNameByCode(model.getOrg_code()));
model.setDepartName(RightManager.getDepartByCode(model.getDepart_code()).getDepart_name());
model.setRoleIds(service.getUserRole1Str(user_id));
List list = roleService.queryRoleListByOrgCode(RightManager.getUserDataOrgCode(model.getOrg_code()));
StringBuffer sb = new StringBuffer();
sb.append("[");
for (int i = 0; i < list.size(); i++) {
RoleModel rm = (RoleModel) list.get(i);
if (i == 0) {
sb.append((new StringBuilder("{'id':'")).append(rm.getRole_id()).append("','name':'").append(rm.getRole_name()).append("'}").toString());
}else {
sb.append((new StringBuilder(",{'id':'")).append(rm.getRole_id()).append("','name':'").append(rm.getRole_name()).append("'}").toString());
}
}
sb.append("]");
model.setOrgRoles(sb.toString());
//String aa = RightManager.getUserOrgs(user_id);
//model.setOrgCodes(aa);
model.setMenuCodes(RightManager.getUserMenus(user_id));
ModelAndView mav = new ModelAndView("/framework/uc/text/view");
mav.addObject("model", model);
return mav;
}
- 修改信息页面
该功能运用的页面是添加功能的add页面,可自行在上面添加功能的jsp查看,后台的Controller运用到了添加功能的goAdd函数,可在添加功能的后台Controller里面查看。
效果图
在Controller里面还运用的了另一个函数
//修改
@RequestMapping(value = "doEdit", produces = "application/json; charset=utf-8")
@ResponseBody
public String doEdit(User1Model model)
{
model.setUpdate_time(new Date());
if(!"".equals(model.getUser_pwd()))
try
{ model.setUser_pwd(MD5Helper.encrypt(model.getUser_pwd()));
}
catch(NoSuchAlgorithmException e)
{
e.printStackTrace();
}
IUserExtend userExtend = (IUserExtend)SpringBeanUtil.getBean("userExtendService");
if(service.update(model) > 0)
{
RightManager.init(4);
return "success";
} else
{
return "failure";
}
}
- 删除
效果图
Controller后台
//删除
@RequestMapping(value = "goDelete", produces = "application/json; charset=utf-8")
@ResponseBody
public String goDelete(HttpServletRequest request)
{
String ids = request.getParameter("ids");
IUserExtend userExtend = (IUserExtend)SpringBeanUtil.getBean("userExtendService");
userExtend.beforeDelete(ids);
if(service.delete(ids) > 0)
{
userExtend.afterDelete(ids);
RightManager.init(4);
return "success";
} else
{
return "failure";
}
}
在这里面只有前端的jsp与后端的Controller,没有service以及serviceImpl,可在java实现信息的增删改查功能的网页设计(2)里面查看。
如遇到问题可在评论区评论或私信,博主看到后将马上回复。
再次声明,本页面仅供参考,如遇其他情况概不负责,不可转载。