架构之路2-前台展示easyui

            先讲一下架构师的定义:架构师负责设计系统整体架构,从需求到设计的每个细节都要考虑到,把握整个项目,使设计的项目尽量效率高,开发容易,维护方便,升级简单。架构师的主要责任是提供开发人员和项目经理之间的共用沟通媒体。他们负责让业务规则及需求与工程实践及限制相适应,以确保成功。

    好了,书归正传,为什么选择easyui,先看easyui的优点:

1)jQueryEasyUI是一种基于jQuery的用户界面插件集合。

2)使用简单但是功能非常强大,提供了丰富的插件和CSS、图片等素材。

3)代码编写量很少,开发工程师编写项目的前端页面展示功能节省了大量的时间和精力。

4)并且提供了丰富的文档支持。

5)非常适合项目组内没有专业的美工开发前端页面情况,对于新兴的HTML5也有不错的支持。

   下面看看我们系统的页面        

             


            充分考虑了页面代码的简洁和开发人员的工作量,把easyui的列表、弹出框,提示框做成公共函数,使用时,直接调用即可。对于一个增删改查功能,普通开发人员半天可完成。真正实现快速开发。

     公共base.js      

	/**
	 * @注释:编辑、添加对话框
	 * @param url	访问地址
	 * @param height 宽的高度
	 * @param width  框的宽度
	 * @param dataDatagrid	列表ID
	 * @param saveCallBack	点击“保存”按钮后,触发的操作函数
	 * 
	 */
		function openEditDialog(url,height,width,dataGrid,saveCallBack){
			var id = "dialogId";
			$(document.body).append("<div id='"+id+"'></div>");
			var mdialog = $('#'+id).dialog({
				href:url,
				width:width,
				height:height,
				border:false,
				cache:false,
				collapsible:false,
				maximizable:false,
				resizable:false,
				modal:true,
				closed:true,
				buttons:[ {
					text:'保存',
					iconCls:'icon-ok',
					handler:function() {
						saveCallBack(id);
					}
				}, {
					text:'取消',
					iconCls:'icon-cancel',
					handler:function() {
						$("#"+id).dialog("close");
					}
				} ],
				onClose:function() {
					$("#"+id).dialog('destroy');
					dataGrid.datagrid("reload");
				}
			});
			return mdialog;
		}
		/**
		 * @注释:查看对话框
		 * @param url	访问地址
		 * @param height 宽的高度
		 * @param width  框的宽度
		 * @param dataDatagrid	列表ID
		 *
		 * 
		 */
			function openViewDialog(url,height,width,dataGrid){
				var id = "dialogId";
				$(document.body).append("<div id='"+id+"'></div>");
				var mdialog = $('#'+id).dialog({
					href:url,
					width:width,
					height:height,
					border:false,
					cache:false,
					collapsible:false,
					maximizable:false,
					resizable:false,
					modal:true,
					closed:true,
					buttons:[ {
						text:'关闭',
						iconCls:'icon-cancel',
						handler:function() {
							$("#"+id).dialog("close");
						}
					} ],
					onClose:function() {
						$("#"+id).dialog('destroy');
						dataGrid.datagrid("reload");
					}
				});
				return mdialog;
			}
		
		/**
		 * @注释:展示列表
		 * @param url	访问地址
		 * 
		 */
		function listdata(url,headTitle){
			//----------数据列表初始化-----------------------
			var dataDatagrid = $("#datalist").datagrid({
			url:url,
			title:headTitle,
			fitColumns:true,
			singleSelect:true,
			pagination:true,
			rownumbers:true,
			showPageList:false,
			pagePosition:'bottom',//top','bottom','both'。
			fit:true,
			border:false,
			width:'auto',
			height:'auto',
			striped:true,
			loadMsg : '数据装载中......',
		    onLoadSuccess:function(data){ 
		    	
		    } 
		});
	
		dataDatagrid.datagrid('getPager').pagination({
		    showPageList:false,
		    pageSize:10
		});
		
		return dataDatagrid;
		}
		
		
		/**
		 * 信息提示框
		 * @param msg
		 */
		function easyui_alert(msg){
			jQuery.messager.alert('信息提示',msg,'info');   
		}
		/**
		 * 错误提示框
		 * @param msg
		 */
		function easyui_error(msg){
			jQuery.messager.alert('错误提示',msg,'error');   
		}
		
		/**
		 * 取得数据区高度
		 */
		function setDataHeight(){
			var screenHeight = document.body.clientHeight;
			var bodyHeight = screenHeight*1;
			//alert(bodyHeight);
			var dataH = bodyHeight*0.7;
			$("#wholedatadiv").css("height",bodyHeight);
			$("#datalistdiv").css("height",dataH+"px");
			
		}
		
		

jsp页面调用:companyList.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../../common/easyui_head.jsp" %>

<!-- 公司参数设置 -->
<script type="text/javascript">
	var dataDatagrid;
	$(function(){
		setDataHeight();
		//展示数据列表
		var url = "${www_url}/companyManage/queryCompanyDatas.do";
		dataDatagrid = listdata(url,"公司信息列表");
		 
	});
	
	//每行后面的操作类型链接	
	function rowformater(val,row,index){
		var html ='';
		if(row.companyLevel=="1"){
			
		}else{
		   if(row.status=="0"){
			 html += "<a href='javascript:void(0)' class='easyui-linkbutton' iconCls='hnses-add' οnclick=\"openCompanyEditDialog('"+row.companyId+"')\">修改</a>";
			 html += "     |     ";
			 html += "<a href='javascript:void(0)' οnclick=\"delCompanyDialog('"+index+"','logout')\">注销</a>";
		   }else{
			 html += "<a href='javascript:void(0)' οnclick=\"delCompanyDialog('"+index+"','inuse')\">启用</a>";
		   }
		 html += "     |     ";
		}
		 
		 html += "<a href='javascript:void(0)' οnclick=\"viewCompanyDialog('"+row.companyId+"')\">查看</a>";
		 return html;
	}
	//-------------新增---------------
	function openCompanyAddDialog() {
		var url="${www_url}/companyManage/openAddCompanyDialog.do";
		openEditDialog(url,230,500,dataDatagrid,function(id) {
			addCompany(id);
		}).dialog('open').dialog('setTitle', '新增公司信息');
	}
	//-------------修改---------------
	function openCompanyEditDialog(companyId) {
		var url="${www_url}/companyManage/openEditCompanyDialog.do?companyId="+companyId;
		openEditDialog(url,230,500,dataDatagrid,function(id) {
			modifyCompany(id);
		}).dialog('open').dialog('setTitle', '修改公司信息');
	}
	//-------------查看---------------
	function viewCompanyDialog(companyId) {
		var url="${www_url}/companyManage/openViewCompanyDialog.do?companyId="+companyId;
		openViewDialog(url,260,500,dataDatagrid).dialog('open').dialog('setTitle', '查看公司信息');
	}
	// ---------------条件查询-------------_----
	function companyListSearch(){
		dataDatagrid.datagrid('load', sy.serializeObject($("#companyList").form()));
	}
	//------------删除----------------------
	function delCompanyDialog(index,doflag){
		var msg = "";
		if(doflag=="logout"){
			msg = "注销";
		}else{
			msg = "启用";
		}
		$.messager.confirm('确认','确认'+msg+'?',function(row){  
            if(row){  
                var selectedRow = dataDatagrid.datagrid('getSelected');  //获取选中行  
                //alert(selectedRow);
                $.ajax({  
                	type: "post",
                    url:'${www_url}/companyManage/delCompany.json',
                    data: {companyId:selectedRow.companyId, doflag:doflag},
                    async: false,
     	           	dataType: "json",
					//删除成功处理
                    success:function(data){
                    	var msg = data.success;
	        	   		if(msg!=true){
	        	   			easyui_error(data.msg);		        	   			
	        	   		}else{	   
                    		dataDatagrid.datagrid('reload'); 
	        	   		}
                    	//dataDatagrid.datagrid('deleteRow',index);  
                    } ,
                    error: function (XMLHttpRequest, textStatus, errorThrown) { 
 	                   alert(errorThrown); 
 	                   return false;
 	           } 
                });                  
            }  
        })  
	}
	//字段翻译值
	function formatLevel(val,row){  
		  if(val == 1){  
		      return "总公司";  
		  }else{  
		      return "子公司";  
		  }  
		}  
	//字段翻译值
	function formatStatus(val,row){  
		  if(val == 0){  
		      return "正常";  
		  }else{  
		      return "停用";  
		  }  
		}  
	
</script>
<div id="data_top_address" >
  		网页位置:
	</div>
<div class="easyui-layout" id="wholedatadiv" data-options="fit:false" style="width: 100%; overflow:visible">

	<div data-options="region:'north',height:33,border:false" style="overflow:hidden;">	
	
		<form id="companyList" method="post">
			<table class="searchForm datagrid-toolbar" fitcolumns="true" style="font-size: 12px; border: 0px; width: 100%">
				<tr>
					<td style="width: 10%;text-align:right;">公司编码:</td>
				    <td style="width: 10%">
				    	<input name="company.companyCode" 
				    	       class="easyui-textbox"
							   data-options="required:false,width:100" />
					</td>
					<td style="width: 10%;text-align:right;">公司名称:</td>
				    <td style="width: 10%">
				    	<input name="company.companyName" 
				    	       class="easyui-textbox"
							   data-options="required:false,width:100" />
					</td>
					<td>
						<div style="text-align: left; padding: 0px">
							<a href="javascript:void(0)" 
							   class="easyui-linkbutton"
							   data-options="iconCls:'hnses-search',plain:false" 
							   οnclick="companyListSearch()">查询</a>
							<a href="javascript:void(0)" 
							   class="easyui-linkbutton" 
							   data-options="iconCls:'hnses-cancel',plain:false"
							   οnclick="cleanForm('companyList');">清空</a>
							   
						</div>
					</td>
					<td>
						<div style="text-align: right; padding: 0px">							
							 <a href="javascript:void(0)" 
							   class="easyui-linkbutton" 
							   data-options="iconCls:'hnses-add',plain:false"
							   οnclick="openCompanyAddDialog();">添加</a>
						</div>
					</td>
				</tr>
			</table>
		</form>
	</div>
	<!-- 数据列表 -->
	<div data-options="region:'center',border:false" id="datalistdiv" fit="true" >
		<table id="datalist">			
			<thead> 
	        	<tr> 
	        		<th field="companyCode" width="100" align="center">公司编号</th> 
		            <th field="companyName" width="100" align="center">公司名称</th> 
		            <th field="companyLevel" width="50" align="center" formatter="formatLevel">公司级别</th>
		            <!-- <th field="companyPid" width="100" align="center">上级公司</th> -->
		            <th field="status" width="50" align="center" formatter="formatStatus">状态</th>		            
		            <th field="--" width="100" align="center" data-options="field:'companyId',formatter:  rowformater">操作类型</th> 
	        	</tr> 
    		</thead> 
		</table>
	</div>
</div>

companyAdd.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../../common/jstl.jspf" %>
<!-- 修改 -->
<script type="text/javascript">
	//---------------修改操作---------------
	function addCompany(cid) {		
		$('#companyDialogForm').form('submit',{
			url : "${www_url}/companyManage/addCompany.json",
			async: false,
			onSubmit : function() {
				//提交表单数据时,如果表单是无效的(校验不通过),阻止表单提交
				var result =  $(this).form('enableValidation').form('validate');
				//alert(result);
				if(result){
					var res = checkData();
					return res;
				}else{
					return false;
				}
				
			},
			success : function(data) {
				var result = eval('(' + data + ')');
				if (result.success) {
					$("#"+cid).dialog("close");
					$("#"+cid).dialog("destroy");
				} else {
					$.messager.alert("提示",result.msg);
				}
			}
		});
	}	
	//生成公司组织树
	 $(function(){
		$('#companyScopeName').combotree({ 
			url:basePath+'tree/queryCompanyTrees.json' 
			});	 
	});
	 
	 //校验公司名称和公司编号不能为空
	 function checkData(){
		 var result = true;
		 $.ajax({ 
	           type: "post", 
	           url: basePath+"/companyManage/checkData.json", 
	           data: {companyName:$("#companyName").val(), companyCode:$("#companyCode").val()},
	           async: false,
	           dataType: "json", 
	           success: function (data) { 
	        	   		var msg = data.success;
	        	   		if(msg!=true){
	        	   			easyui_error(data.msg);	
	        	   			result = false;
	        	   		}	                   
	           }, 
	           error: function (XMLHttpRequest, textStatus, errorThrown) { 
	                   alert(errorThrown); 
	                   return false;
	           } 
	    });
		 return result;
	 } 
	 
</script>
<form id="companyDialogForm" method="post" data-options="novalidate:true">		
		<table class="tableForm" style="width:100%">
			<tr>
				<td class="tdR"><span style="color:red">*</span>公司编码</td>
				<td>
					<input name="company.companyCode" value="" id="companyCode"
						   class="easyui-textbox" 
						   data-options="required:true,width:300" missingMessage="公司编码必须填写"/>
				</td>
			</tr>
			<tr>
				<td class="tdR"><span style="color:red">*</span>公司名称</td>
	 			<td>
	 				<input name="company.companyName" id="companyName"
	 					   class="easyui-textbox" 
	 					   data-options="required:true,width:300"
	 					   missingMessage="公司名称必须填写" />
	 			</td>
	 		</tr>
	 		
			<!-- <tr>
				<td class="tdR"><span style="color:red">*</span>公司级别</td>
	 			<td>
					<select class="easyui-combobox" name="company.companyLevel" style="width:200px;">
						<option value="1">总公司</option>		
						<option value="2">分公司</option>
					</select>
 				</td>
	 		</tr> -->
	 		<tr>
				<td class="tdR"><span style="color:red">*</span>上级公司</td>
	 			<td>
	 				<select id="companyScopeName" name="company.companyPid" class="easyui-combotree" 
	 					   data-options="required:true"  style="width:300px;"></select>
	 			</td>
	 		</tr>	 		
	 		<tr>
				<td class="tdR">公司描述</td>
	 			<td>
		 			<textarea name="company.companyDesc" 
		 				      class="easyui-validatebox" 
		 				      style="height:50px;width:300px;"></textarea>
	 			</td>
	 		</tr>			
		</table>
</form>	
添加了校验validator.js。可验证的项有:身份证(idcard)、长度()、座机,手机号、货币、qq号、年龄、英文、整数、传真、邮编、ip地址、日期、msn账号。调用方法:
<input name="staff.email" id="email"
 	    class="easyui-textbox"  validtype="email" 
 	    data-options="required:true,width:300"
 	    missingMessage="电子邮箱必须填写" invalidMessage="电子邮箱格式不正确!"/>
validator.js

$.extend($.fn.validatebox.defaults.rules, {  
           idcard: {// 验证身份证  
               validator: function (value) {  
                   return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);  
               },  
               message: '身份证号码格式不正确'  
           },  
           minLength: {  
               validator: function (value, param) {  
                   return value.length >= param[0];  
               },  
               message: '请输入至少(2)个字符.'  
           },  
           length: { validator: function (value, param) {  
               var len = $.trim(value).length;  
               return len >= param[0] && len <= param[1];  
           },  
               message: "输入内容长度必须介于{0}和{1}之间."  
           },  
           phone: {// 验证电话号码  
               validator: function (value) {  
                   return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);  
               },  
               message: '格式不正确,请使用下面格式:020-88888888'  
           },  
           mobile: {// 验证手机号码  
               validator: function (value) {  
                   return /^(13|15|18)\d{9}$/i.test(value);  
               },  
               message: '手机号码格式不正确'  
           },  
           intOrFloat: {// 验证整数或小数  
               validator: function (value) {  
                   return /^\d+(\.\d+)?$/i.test(value);  
               },  
               message: '请输入数字,并确保格式正确'  
           },  
           currency: {// 验证货币  
               validator: function (value) {  
                   return /^\d+(\.\d+)?$/i.test(value);  
               },  
               message: '货币格式不正确'  
           },  
           qq: {// 验证QQ,从10000开始  
               validator: function (value) {  
                   return /^[1-9]\d{4,9}$/i.test(value);  
               },  
               message: 'QQ号码格式不正确'  
           },  
           integer: {// 验证整数 可正负数  
               validator: function (value) {  
                   //return /^[+]?[1-9]+\d*$/i.test(value);  
  
                   return /^([+]?[0-9])|([-]?[0-9])+\d*$/i.test(value);  
               },  
               message: '请输入整数'  
           },  
           age: {// 验证年龄  
               validator: function (value) {  
                   return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i.test(value);  
               },  
               message: '年龄必须是0到120之间的整数'  
           },  
  
           chinese: {// 验证中文  
               validator: function (value) {  
                   return /^[\Α-\¥]+$/i.test(value);  
               },  
               message: '请输入中文'  
           },  
           english: {// 验证英语  
               validator: function (value) {  
                   return /^[A-Za-z]+$/i.test(value);  
               },  
               message: '请输入英文'  
           },  
           unnormal: {// 验证是否包含空格和非法字符  
               validator: function (value) {  
                   return /.+/i.test(value);  
               },  
               message: '输入值不能为空和包含其他非法字符'  
           },  
           username: {// 验证用户名  
               validator: function (value) {  
                   return /^[a-zA-Z][a-zA-Z0-9_@.]{5,15}$/i.test(value);  
               },  
               message: '用户名不合法(字母开头,允许6-16字节,允许字母数字下划线)'  
           },  
           faxno: {// 验证传真  
               validator: function (value) {  
                   //            return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/i.test(value);  
                   return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);  
               },  
               message: '传真号码不正确'  
           },  
           zip: {// 验证邮政编码  
               validator: function (value) {  
                   return /^[1-9]\d{5}$/i.test(value);  
               },  
               message: '邮政编码格式不正确'  
           },  
           ip: {// 验证IP地址  
               validator: function (value) {  
                   return /d+.d+.d+.d+/i.test(value);  
               },  
               message: 'IP地址格式不正确'  
           },  
           name: {// 验证姓名,可以是中文或英文  
               validator: function (value) {  
                   return /^[\Α-\¥]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);  
               },  
               message: '请输入姓名'  
           },  
           date: {// 验证姓名,可以是中文或英文  
               validator: function (value) {  
                   //格式yyyy-MM-dd或yyyy-M-d  
                   return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2\2(?:29))$/i.test(value);  
               },  
               message: '清输入合适的日期格式'  
           },  
           msn: {  
               validator: function (value) {  
                   return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);  
               },  
               message: '请输入有效的msn账号(例:abc@hotnail(msn/live).com)'  
           },  
           same: {  
               validator: function (value, param) {  
                   if ($("#" + param[0]).val() != "" && value != "") {  
                       return $("#" + param[0]).val() == value;  
                   } else {  
                       return true;  
                   }  
               },  
               message: '两次输入的密码不一致!'  
           }  
       });  

前端部分讲完了,下一节我们介绍spring架构。对于easyui组件的使用可以查询easyui中文网

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值