java实现信息的增删改查功能的网页设计(1)

2023-11-06

仅供参考,不可转载,如遇其他情况概不负责,后果自负,切记

该项目运用的技术:spring+springMVC+ibatis
本网页只有一个页面,包过信息的增、删、改、查功能,只有部分代码,仅供参考
因该项目比较大,所以仅提供了一个页面内的增删改查,用到的数据表有用户表、角色表、用户角色表三张表来实现。

在这里面只有前端的jsp与后端的Controller,没有service以及serviceImpl,可在java实现信息的增删改查功能的网页设计(2)里面查看。

  1. 整体页面的效果图演示
    该页面是这个网页的连接的整体效果图,主要分为两个部分: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;
	}
  1. 增加页面
    效果图
    在这里插入图片描述
    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";
		}		
	}
  1. 查看详情页面
    效果图
    在这里插入图片描述

前台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;
	}
  1. 修改信息页面
    该功能运用的页面是添加功能的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";
	        }
	    }

  1. 删除
    效果图
    在这里插入图片描述
    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)里面查看。

如遇到问题可在评论区评论或私信,博主看到后将马上回复。
再次声明,本页面仅供参考,如遇其他情况概不负责,不可转载。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

java实现信息的增删改查功能的网页设计(1) 的相关文章

随机推荐

  • Sentinel-持久化

    直接使用dashboard和sentinel配置各种规则时 默认是存在了内存中 如果服务器重启那么数据就会丢失 从而Sentinel提供了5中持久化的方式 将各种配置数据进行持久化 若服务器重启就重新加载持久化的数据 防止数据丢失 1 持久
  • 使用adb查看安装包的apk路径与清除安装包数据与缓存操作实例

    adb shell pm path
  • 【Stata】CGSS数据清理:Codebook速成法

    对数据使用者来说 了解一个调查数据基本情况的常见途径就是查看该数据的codebook 对数据所有者 提供方来说 制作一份详细的codebook是其数据管理工作中不可或缺的一环 2016年上半年CGSS项目组把CGSS2003年到CGSS20
  • 解决Ubuntu安装后无法联网的问题-网卡驱动为安装成功

    转载自 http blog csdn net ifmvo article details 54023628 t0 起因 屁话 最近由于公司电脑不够用 所以暂时使用自己的笔记本做开发 i5 4G win7这配置看个视频 听个音乐还好 可我是做
  • 【动手学习pytorch笔记】9.卷积神经网络基础(卷积层,填充和步长,多输入输出通道,池化层)

    卷积层 二维互相关运算 import torch from torch import nn from d2l import torch as d2l def corr2d X K 计算二维互相关运算 h w K shape Y torch
  • 【LeetCode刷题】94、二叉树的中序遍历(C++)

    94 二叉树的中序遍历 原题连接 https leetcode cn problems binary tree inorder traversal 问题描述 给定一个二叉树的根节点 root 返回 它的 中序 遍历 示例 1 输入 root
  • react——事件绑定

    react有两种写法 一种是类组件 也叫有状态组件 一种是函数式组件 也叫无状态组件 而后引入了react hooks 函数式组件也能修改状态 在这两种组件中的事件绑定的原理一样 写法不一样 这篇文章主要就是记录这两种组件中的事件绑定写法
  • 迁移学习一、基本使用

    非完全原创 但遗失了原文链接 看到可更改 迁移学习 一 迁移学习方法介绍 1 微调网络的方法 微调网络的方法实现迁移学习 更改最后一层全连接 并且微调训练网络 2 将模型看成特征提取器 将模型看成特征提取器 如果一个模型的预训练模型非常的好
  • 实现model中的文件上传FTP(一)

    由于在django的model中配置了filefield或者imagefield配置了upload to参数只能将用户上传的文件上传到项目本地 就算重定向到项目外也只是直接读取文件系统 这样对未来的项目迁移或者资源管理都会造成很大的困扰 而
  • HJ2 计算某字符出现次数

    知识点字符串哈希 描述 写出一个程序 接受一个由字母 数字和空格组成的字符串 和一个字符 然后输出输入字符串中该字符的出现次数 不区分大小写字母 数据范围 1 n 1000 输入描述 第一行输入一个由字母和数字以及空格组成的字符串 第二行输
  • 设计模式梳理——访问者模式

    一 概述 访问者模式 Visitor 表示一个作用于某对象结构中的各元素的操作 它使你可以在不改变个元素的类的前提下作用于这些元素的新操作 二 UML图示 三 代码实现 我们都知道财务都是有账本的 这个账本就可以作为一个对象结构 而它其中的
  • springsecurity 提示:There is no PasswordEncoder mapped for the id "null"

    用户角色权限系统 springboot springsecurity mysql 提示如下错误信息 java lang IllegalArgumentException There is no PasswordEncoder mapped
  • 虚函数的原理

    引用 windows程序员面试指南 虚函数 虚函数通过虚函数表管理 特点 1 虚函数表属于类 类的所有对象共享这个类的虚函数表 2 虚函数指针属于对象 在每个对象内部的开头 指向同一虚函数表 继承特点 只继承一个父类无覆盖时 父类虚函数在子
  • 在64位电脑上 使用anaconda虚拟环境将Python程序打包成32位

    之前写啦一些打包博文 见链接 anaconda虚拟环境教程大全 使用pipenv建立虚拟环境解决python打包exe文件过大的问题 附打包带图标 多个py文件打包exe cmd执行python程序 文件夹直接进入cmd程序 python将
  • VirtualBox网络之桥接网卡

    如下图所示 VirtualBox支持的网络模式有多种 桥接网卡不同与其它的几种 首先体现在名字上 其它模式都带有 网络 字眼 说明当前的网卡需要接入一个由用户创建的网络 而桥接网卡则只是网卡 这种模式不需要创建网络 从效果上看 这种网卡与宿
  • Linux 下使用命令行查看PDF

    使用 evince命令查看 evince frames pdf
  • 低通、高通、带通、阻通滤波器

    目录 低通 高通 带通 阻通滤波器 低通 高通 带通 带阻滤波器的区别 通俗理解 1 低通滤波器 2 高通滤波器 3 带通滤波器 4 带阻滤波器 5 全通滤波器 低通 高通 带通 阻通滤波器 低通 高通 带通 带阻滤波器的区别 低通滤波器
  • STM32系列(HAL库)——F103C8T6通过NRF24L01(2.4G)无线模块进行双机通信

    本文参考 STM32L051C8T6 HAL库 nRF24L01 收发案例 硬件SPI通讯 1 软件准备 1 编程平台 Keil5 2 CubeMX 3 XCOM 串口调试助手 2 硬件准备 2套 1 F1的板子 本例使用经典F103C8T
  • ROS开发日记(1)——ROS基础知识

    ROS 即开源机器人操作系统 1 官方定义 ROS是面向机器人的开源的元操作系统 meta operating system 1 它能够提供类似传统操作系统的诸多功能 如硬件抽象 底层设备控制 常用功能实现 进程间消息传递和程序包管理等 此
  • java实现信息的增删改查功能的网页设计(1)

    仅供参考 不可转载 如遇其他情况概不负责 后果自负 切记 该项目运用的技术 spring springMVC ibatis 本网页只有一个页面 包过信息的增 删 改 查功能 只有部分代码 仅供参考 因该项目比较大 所以仅提供了一个页面内的增