码迷，mamicode.com
首页 > 其他好文 > 详细

国家电力项目-03

时间：2015-04-10 23:47:20      阅读：208      评论：0      收藏：0      [点我收藏+]

标签：

项目第三天（数据字典）

1：需要的表

  1. #数据字典
  2. CREATE TABLE Elec_SystemDDL(
  3. 	seqID INT NOT NULL primary key,          #主键ID(自增长)
  4. 	keyword VARCHAR(20)   NULL,  #数据类型
  5. 	ddlCode INT  NULL,           #数据项的code
  6. 	ddlName VARCHAR(50)  NULL    #数据项的value
  7. )

        存放的数据：

        技术分享

2：hql和sql语句的投影查询

（1）如果投影查询是一个字段，此时返回List<Object>，例如

  1. String hql = "SELECT DISTINCT o.keyword FROM ElecSystemDDL o";
  3. List<Object> list = this.getHibernateTemplate().find(hql);

（2）如果投影查询是多个字段，此时返回List<Object[]>，例如

  1. String hql = "SELECT DISTINCT o.keyword,o.ddlName FROM ElecSystemDDL o";
  3. List<Object[]> list = this.getHibernateTemplate().find(hql);

（3）如果投影查询是多个字段，此时返回List<Object[]>，例如

  1. String hql = "SELECT o,o.ddlName FROM ElecSystemDDL o";
  3. List<Object[]> list = this.getHibernateTemplate().find(hql);

        数组的第一个值，是一个ElecSystemDDL的对象，数组的第二个值表示字段ddlName的值。

（4）如果投影查询是一个对象，此时返回List<ElecSystemDDL>，例如

  1. String hql = "SELECT o FROM ElecSystemDDL o";
  3. List<ElecSystemDDL> list = this.getHibernateTemplate().find(hql);

（5）如果是hql语句，使用hql语句直接将投影查询的字段放置到对象中，例如

  1. String hql = "SELECT DISTINCT new cn.itcast.elec.domain.ElecSystemDDL(o.keyword) FROM ElecSystemDDL o";
  3. List<ElecSystemDDL> list = this.getHibernateTemplate().find(hql);

  1. @SuppressWarnings("serial")
  2. public class ElecSystemDDL implements java.io.Serializable {
  3. 	
  4. 	private Integer seqID;		//主键ID(自增长)
  5. 	private String keyword;		//数据类型
  6. 	private Integer ddlCode;	//数据项的code
  7. 	private String ddlName;		//数据项的value

3：页面使用select进行遍历List<ElecSystemDDL>

（1）Dao中的查询代码

  1. @Override
  2. 	public List<ElecSystemDDL> findSystemDDLListWithDistinct() {

  4. 		String hql = "select distinct o.keyword from ElecSystemDDL o";
  5. 		List<Object> list = this.getHibernateTemplate().find(hql);

  7. 		//类型转换
  8. 		List<ElecSystemDDL> newList = new ArrayList<ElecSystemDDL>();
  9. 		for (Object object : list) {
  10. 			ElecSystemDDL elecSystemDDL = new ElecSystemDDL();
  11. 			elecSystemDDL.setKeyword(object.toString());
  12. 			newList.add(elecSystemDDL);
  13. 		}
  14. 		return newList;
  15. 	}

（2）方案一：使用<s:iterator>遍历<option>

  1. <select name="keyword" class="bg" style="width:180px" onchange="changetype()">
  3.         <option value="jerrynew"></option>
  5.         <s:iterator value="#request.list" var="system">
  7.                 <option value="<s:property value="#system.keyword"/>">
  9. <s:property value="#system.keyword"/>
  11. </option>
  13.         </s:iterator>
  15. </select>

（3）方案二：使用<s:select>

  1. <s:select list="#request.list" name="keyword" id="keyword"
  3.                 listKey="keyword" listValue="keyword"
  5.                 headerKey="jerrynew" headerValue=""
  7.                 cssClass="bg" cssStyle="width:180px" onchange="changetype()">
  9. </s:select>

        技术分享

4：掌握js的写法（<table>标签的添加行和删除行）

（1）页面效果：

技术分享

（2）Js代码：

（2-1）JQuery方式：

  1. function insertRows(){
  3.          //获取表格对象
  5.          var tb1 = $("#dictTbl");
  7.          var tempRow = $("#dictTbl tr").size();//获取表格的行数
  9.          var $tdNum = $("<td align=‘center‘></td>");
  11.        $tdNum.html(tempRow);

  13.          var $tdName = $("<td align=‘center‘></td>");
  15.        $tdName.html("<input name=\"itemname\" type=\"text\" id=\""+tempRow+"\" size=\"45\" maxlength=25>");

  17.          var $tdDel = $("<td align=‘center‘></td>");
  19.        $tdDel.html("<a href=‘javascript:delTableRow(\""+tempRow+"\")‘><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>");
  21.          // 创建tr，将3个td放置到tr中
  23.          var $tr = $("<tr></tr>");
  25.        $tr.append($tdNum);
  27.        $tr.append($tdName);
  29.        $tr.append($tdDel);
  31.          //在表格的最后追加新增的tr
  33.        tb1.append($tr);
  35. }

  37. function delTableRow(rowNum){
  39.       //改变行号和删除的行号
  41.       var $tb1 = $("#dictTbl");
  43.       var tempRow = $("#dictTbl tr").size();//获取表格的行数
  45.       if (tempRow >rowNum){    
  47.       //获取删除行的id指定的对象，例如：<input name=\"itemname\" type=\"text\" id=\""+tempRow+"\" size=\"45\" maxlength=25>
  49.      $("#"+rowNum).parent().parent().remove();
  51.       //加1表示寻找下一个id，目的是将后面tr的格式向上移动
  53.       for (i=(parseInt(rowNum)+1);i<tempRow;i++){
  55.       //将i-1的值赋值给编号
  57.      $("#"+i).parent().prev().html(i-1);
  59.       //将i-1的值赋值给超链接的删除
  61.      $("#"+i).parent().next().html("<a href=‘javascript:delTableRow(\""+(i-1)+"\")‘><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>");//
  63.       //将i-1的值赋值给文本框的id，用于删除
  65.      $("#"+i).attr("id",(i-1));//将id设置成i-1
  67.       }
  69.    }
  71. }

（2-2）Dom方式：

  1. function insertRows(){ 
  3.   var tempRow=0; 
  4.   var tbl=document.getElementById("dictTbl");
  5.   tempRow=tbl.rows.length; 
  6.   var Rows=tbl.rows;//类似数组的Rows 
  7.   var newRow=tbl.insertRow(tbl.rows.length);//插入新的一行 
  8.   var Cells=newRow.cells;//类似数组的Cells 
  9.   for (i=0;i<3;i++)//每行的3列数据 
  10.   { 
  11.      var newCell=Rows[newRow.rowIndex].insertCell(Cells.length); 
  12.      newCell.align="center"; 
  13.      switch (i) 
  14.     { 
  15.       case 0 : newCell.innerHTML=""+tempRow+"";break; 
  16.       case 1 : newCell.innerHTML="<input name=\"itemname\" type=\"text\" id=\""+tempRow+"\" size=\"45\" maxlength=25>";break; 
  17.       case 2 : newCell.innerHTML="<a href=‘javascript:delTableRow(\""+tempRow+"\")‘><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>";break;
  19.     } 
  20.     //alert(newCell.innerHTML);
  21.   } 
  22.  } 
  23. function delTableRow(rowNum){ 
  25.    var tbl=document.getElementById("dictTbl");
  26.     
  27.     if (tbl.rows.length >rowNum){ 
  28.       
  29.        tbl.deleteRow(rowNum); 
  30.      
  31.       for (i=rowNum;i<tbl.rows.length;i++)
  32.        {
  33.          tbl.rows[i].cells[0].innerHTML=i;
  34.          tbl.rows[i].cells[2].innerHTML="<a href=‘javascript:delTableRow(\""+i+"\")‘><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>";      
  35.          tbl.rows[i].cells[1].childNodes[0].id=i;
  36.       }
  37.    }
  38. }

（3）Jsp代码：

技术分享
        第一行为表格的表头，默认再显示一个第二行方便用户操作，table的id为dicTbl。

  1. <table cellspacing="0"   cellpadding="1" rules="all" bordercolor="gray" border="1" id="dictTbl" style="BORDER-RIGHT:gray 1px solid; BORDER-TOP:gray 1px solid; BORDER-LEFT:gray 1px solid; WIDTH:100%; WORD-BREAK:break-all; BORDER-BOTTOM:gray 1px solid; BORDER-COLLAPSE:collapse; BACKGROUND-COLOR:#f5fafe; WORD-WRAP:break-word">                

  3.     <tr style="FONT-WEIGHT:bold;FONT-SIZE:12pt;HEIGHT:25px;BACKGROUND-COLOR:#afd1f3">
  5.         <td class="ta_01" align="center"  width="20%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">编号</td>
  7.         <td class="ta_01" align="center"  width="60%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">名称</td>
  9.         <td class="ta_01" align="center"  width="20%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">删除</td>                 
  10.     </tr>
  11.           
  12.     <tr>
  14.         <td class="ta_01" align="center"  width="20%">1</td>
  16.         <td class="ta_01" align="center"  width="60%">
  18.             <input name="itemname" type="text"  size="45" maxlength="25"></td>
  20.         <td class="ta_01" align="center"  width="20%"></td>
  22.     </tr>      
  24. </table>

        在使用<table>标签实现表格添加行和删除行的时候，后台获取页面填写的值，此时是一个String类型的数组对象，可以采用遍历数组的方式，保存数据。

5：DOM对象的ajax（封装在pub.js）

        Ajax操作的核心对象：xmlreq = new XMLHttpRequest();

        第一步：在dictionaryIndex.jsp中添加：

  1. <script type="text/javascript" src="${pageContext.request.contextPath }/script/pub.js"></script>

        第二步：调用js的代码：实现：

  1. /**
  3.          Pub.submitActionWithForm:
  5.          * 参数一：表单Form2的名称
  7.          * 参数二：表示URL连接
  9.          * 参数三：表单Form1的名称
  11.          ajax的封装：
  13.          1：在dictionaryIndex.jsp中存在2个表单Form1和Form2
  15.          2：使用ajax传递表单Form1中的元素作为参数，在服务器端进行处理，将处理后的结果放置dictionaryEdit.jsp中
  17.          3：将dictionaryEdit.jsp中的全部内容放置dictionaryIndex.jsp页面的Form2中
  19.          效果：异步效果，一个页面表单Form1中的内容不发生变化，Form2中的内容发生变化
  21. */
  23. Pub.submitActionWithForm(‘Form2‘,‘${pageContext.request.contextPath }/system/elecSystemDDLAction_edit.do‘,‘Form1‘);

        第三步：在pub.js中定义：

        方法一：（Pub.submitActionWithForm——发送了Form1选择的参数）

  1. /***
  3.  * domId：表单Form2的名称
  5.  * action：表示URL连接
  7.  * sForm：表单Form1的名称
  9.  */
  11. Pub.submitActionWithForm=function(domId,action,sForm){
  13.   /**第一步：创建Ajax引擎对象*/
  15.   var req = Pub.newXMLHttpRequest();
  17.   /**第二步：req.onreadystatechange表示事件处理函数（相当于一个监听），用来监听客户端与服务器端的连接状态*/
  19.   var handlerFunction = Pub.getReadyStateHandler(req, domId,Pub.handleResponse);
  21.   req.onreadystatechange = handlerFunction;
  23.   /**第三步：打开一个连接，要求：如果是POST请求，需要设置一个头部信息，否则此时不能使用req.send()方法向服务器发送数据*/
  25.   req.open("POST", action, true);
  27.   req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  29.   /**第四步：向服务器发送数据，格式：name=张三&age=28*/
  31.   var str = Pub.getParams2Str(sForm);
  33.   //传递表单Form1中的元素作为参数给服务器
  35.   req.send(str);
  37. }

        方法二：创建ajax引擎（Pub.newXMLHttpRequest）

  1. /**
  3.  * 创建ajax引擎
  5.  */
  7. Pub.newXMLHttpRequest=function newXMLHttpRequest() {
  9.   var xmlreq = false;
  11.   if (window.XMLHttpRequest) {
  13.     xmlreq = new XMLHttpRequest();
  15.   } else if (window.ActiveXObject) {

  17.     try {

  19.       xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
  21.     } catch (e1) {

  23.       try {

  25.         xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
  27.       } catch (e2) {

  29.         alert(e2);
  31.       }
  32.     }
  33.   }
  35.   return xmlreq;
  37. }

        方法三：传递表单Form1中的元素作为参数（Pub.getParams2Str）

  1. /**
  3.  *
  5.  * @param sForm：传递表单Form1的名称
  7.  * @returns {String}：使用ajax返回服务器端的参数，传递的就是表单Form1中元素的参数
  9.  */
  11. Pub.getParams2Str=function getParams2Str(sForm){

  13.  var strDiv="";

  15.  try {
  17.     var objForm=document.forms[sForm];
  19.   if (!objForm)
  21.     return strDiv;
  23.   var elt,sName,sValue;
  25.   for (var fld = 0; fld < objForm.elements.length; fld++) {
  27.       elt = objForm.elements[fld];   
  29.       sName=elt.name;
  31.       sValue=""+elt.value;
  33.       if(fld==objForm.elements.length-1)
  35.           strDiv=strDiv + sName+"="+sValue+"";
  37.        else   
  39.           strDiv=strDiv + sName+"="+sValue+"&";
  41.    }
  42.   }
  44.   catch (ex) {
  46.     return strDiv;
  48.     }
  49.    return strDiv;
  51. }

        方法四：接收服务器端返回的结果（Pub.getReadyStateHandler）

  1. /**
  3.  *
  5.  * @param req:引擎对象
  7.  * @param eleid：表单Form2的名称
  9.  * @param responseXmlHandler：Pub.handleResponse（函数体）
  11.  * @returns {Function}
  13.  */
  15. Pub.getReadyStateHandler =function getReadyStateHandler(req, eleid,responseXmlHandler) {

  17.   return function () {
  19.     /**
  21.      * req.readyState:用来监听客户端与服务器端的连接状态
  23.      * 0：表示此时客户端没有调用open()方法
  25.      * 1：表示客户端执行open方法，但是send方法没有执行
  27.      * 2：open方法执行，send方法也执行
  29.      * 3：服务器开始处理数据，并返回数据
  31.      * 4：返回数据成功，只有4这个状态，才能获取服务器端返回的结果
  33.      */
  35.     if (req.readyState == 4) {
  37.        /**
  39.         * req.status：表示java的状态码
  41.         * 404：路径错误
  43.         * 500：服务器异常
  45.         * 200：表示没有异常，正常访问数据，只有200这个状态的时候，才能获取服务器端返回的结果
  47.         */
  49.       if (req.status == 200) {
  51.           /**
  53.            * req.responseText:获取服务器端返回的结果，返回的是文本的结果（包括：字符串，json数据）
  55.            * req.responseXML:获取服务器端返回的结果，返回的是XML数据的结果
  57.            */
  59.         responseXmlHandler(req.responseText,eleid);

  61.       } else {
  63.         alert("HTTP error: "+req.status);
  65.         return false;
  67.       }
  69.     }
  71.   }

        方法五：将返回的结果dictionaryEdit.jsp，并放置到dictionaryIndex.jsp的Form2中（Pub.handleResponse）

  1. /**
  3. * @param data：服务器返回的结果
  5.  * @param eleid：表单Form2的名称
  7.  */
  9. Pub.handleResponse= function handleResponse(data,eleid){
  11.       //获取表单Form2的对象
  13.       var ele =document.getElementById(eleid);
  15.       //将返回的结果放置到表单Form2的元素中
  17.       ele.innerHTML = data;

  19. }

（1）功能实现代码：

（1-1）Action中的代码：

  1. /**
  2. 	 * 跳转进入数据字典维护编辑页面
  3. 	 * @return
  4. 	 */
  5. 	public String edit(){
  6. 		//获取页面传递的keyword值
  7. 		String keyword = elecSystemDDL.getKeyword();
  8. 		if (!"jerrynew".equals(keyword)) {
  9. 			//根据keyword查询出对应类别的所有记录
  10. 			List<ElecSystemDDL> list = elecSystemDDLService.findElecSystemDDL(keyword);
  11. 			//建list存储到request域中转发到dictionaryIndex.jsp页面
  12. 			request.setAttribute("list", list);
  13. 		}
  14. 		return "edit";
  15. 	}

（1-2）Service中的代码：

  1. @Override
  2. 	@Transactional(readOnly=false,isolation=Isolation.DEFAULT,propagation=Propagation.REQUIRED)
  3. 	public List<ElecSystemDDL> findElecSystemDDL(String keyword) {
  4. 		
  5. 		String condition = "and o.keyword = ?";
  6. 		Object[] params = {keyword};
  7. 		Map<String,String> orderby = new LinkedHashMap<String,String>();
  8. 		orderby.put("o.ddlCode", "asc");
  9. 		
  10. 		List<ElecSystemDDL> list = elecSystemDDLDao.findCollectionByConditionNoPage(condition, params, orderby);
  11. 		return list;
  12. 	}

（1-3）效果：

技术分享

（1-4）完成选择类型列表，实现Form2表单的内容替换

技术分享

（1-5）保存功能的实现：

  1. //ElecSystemDDL：首先在这个类中添加几个非持久化javabean属性，用于接收页面传递过来的隐藏域和表单值
  2. /*————————————————————非持久化JavaBean属性——————————————————*/

  4. 	//接受页面表单的多个输入值
  5. 	private String[] itemname;

  7. 	//存放数据类型
  8. 	private String keywordname;

  10. 	//进行保存功能的业务判断，如果为new表示新增一种数据类型，add表示在已有的类型基础上进行添加
  11. 	private String typeflag;

（1-6）点击保存传递隐藏域值：

技术分享

  1. <tr>
  2.      <td align="center" colspan=3>
  3.        <input type="button" name="saveitem" value="保存" style="font-size:12px; color:black; height=20;width=50" onClick="returnMethod()">
  4.      </td>
  5.  </tr>
  6.  
  7. <input type="hidden" name="keywordname" >
  8. <input type="hidden" name="typeflag" >

（1-7）调用：

  1. function returnMethod(){
  2. 		return saveDict();
  3. 	}

（1-8）点击保存判断当前的操作是新增一种数据类型还是在已有数据类型的基础上进行添加：

  1. function saveDict(){
  2. 	      
  3. 	      if(document.Form1.keyword.value=="jerrynew"){
  4. 	          if(Trim(document.Form1.keywordname.value)==""){
  5. 	             alert("请输入类型名称");
  6. 	             return false;
  7. 	          }
  8. 	          
  9. 	         var allkeywords= document.Form1.keyword;
  10. 	         for(var i=0;i<allkeywords.length;i++){
  11. 	    
  12. 	            if(allkeywords[i].value==Trim(document.Form1.keywordname.value)){           
  14. 	               alert("已存在此类型名称,请重新输入");
  15. 	               return false;
  16. 	             }
  17. 	             
  18. 	         }
  19. 	         
  20. 	          document.Form2.keywordname.value=document.Form1.keywordname.value;
  21. 	          document.Form2.typeflag.value="new";
  22. 	          
  23. 	      }else{
  24. 	      
  25. 	          document.Form2.keywordname.value=document.Form1.keyword.value;
  26. 	          document.Form2.typeflag.value="add";	
  27. 	      }
  28. 	      var tbl=document.getElementById("dictTbl");
  29. 	      for (i=1;i<tbl.rows.length;i++){   
  30. 		   	  	var name = tbl.rows[i].cells[1].getElementsByTagName("input")[0].value;
  31. 		   	  	if(Trim(name)==""){
  32. 		   	  	    alert("名称不能为空！");
  33. 		   	  	    
  34. 		   	  	    return false;
  35. 	   	  	    }
  36. 	   	  }
  37. 	   	  for(k=1;k<=tbl.rows.length-2;k++)
  38. 		  {
  39. 	 	  	for(m=k+1;m<=tbl.rows.length-1;m++)
  40. 	 	  	{     
  41. 		  	  	var name1 = tbl.rows[k].cells[1].getElementsByTagName("input")[0].value;
  42. 		  	  	var name2 = tbl.rows[m].cells[1].getElementsByTagName("input")[0].value;
  43. 		  	  	if(name1 == name2){
  44. 		  	  		alert("名称不能相同！"); 
  45. 		  	  		 return false;
  46. 		        }	
  47. 		    }
  48. 		  }
  49. 	      document.Form2.action="savedict.do";
  50. 	      document.Form2.submit();     
  51. 	}

（1-9）保存操作（ElecSystemDDLAction中的代码）：

技术分享

  1. /**
  2. 	 * 保存数据字典更新或者添加的字段
  3. 	 * @return
  4. 	 */
  5. 	public String savedict(){
  6. 		//获取模型对象接收到的页面值
  7. 		String keywordname = elecSystemDDL.getKeywordname();
  8. 		//获取表单上的值
  9. 		String[] itemnames = elecSystemDDL.getItemname();
  10. 		//获取操作类型
  11. 		String typeflag = elecSystemDDL.getTypeflag();
  12. 		//查询出对应keyword的所有记录
  13. 		List<ElecSystemDDL> list = elecSystemDDLService.findElecSystemDDL(keywordname);
  14. 		//add，在已有基础上进行添加，最好的处理方式就是 将该类别的所有记录删除再添加进去
  15. 		if ("add".equals(typeflag)) {
  16. 			//先删除
  17. 			elecSystemDDLService.deleteObjectByCollection(list);
  18. 			//再添加，根据类别将具体itemnames数组中的值插入数据库中
  19. 			elecSystemDDLService.saveSystemDDL(itemnames,keywordname);
  20. 		}else{
  21. 			//new，直接向数据库中添加一条对应类型的数据
  22. 			elecSystemDDLService.saveSystemDDL(itemnames,keywordname);
  23. 		}
  24. 		return "savedict";
  25. 	}

（1-10）ElecSystemDDLServiceImpl的代码：

  1. @Override
  2. 	@Transactional(readOnly=false,isolation=Isolation.DEFAULT,propagation=Propagation.REQUIRED)
  3. 	public void deleteObjectByCollection(List<ElecSystemDDL> list) {
  4. 		elecSystemDDLDao.deleteObjectByCollection(list);
  5. 	}
  7. 	@Override
  8. 	@Transactional(readOnly=false,isolation=Isolation.DEFAULT,propagation=Propagation.REQUIRED)
  9. 	public void saveSystemDDL(String[] itemnames, String keywordname) {
  10. 		if (itemnames!= null && itemnames.length > 0) {
  11. 			for (int i = 0; i < itemnames.length; i++) {
  12. 				ElecSystemDDL elecSystemDDL = new ElecSystemDDL();
  13. 				//将遍历的值设置到对象中去
  14. 				elecSystemDDL.setDdlName(itemnames[i]);
  15. 				elecSystemDDL.setKeyword(keywordname);
  16. 				//设置保存的ddlCode值
  17. 				elecSystemDDL.setDdlCode(i+1);
  18. 				//保存到数据库中去
  19. 				elecSystemDDLDao.save(elecSystemDDL);
  20. 			}
  21. 		}
  22. 	}
        注意：数据字典的数据会影响整个应用的数据，只能由管理员来操作，这个后面权限管理的时候会用到。
        效果：
技术分享

（1-11）附录：jquery对象的ajax应用：

  1. Pub.js
  3. function Pub(){ }
  5. /**

  7.  * @param data：服务器返回的结果
  9.  * @param eleid：表单Form2的名称
  11.  */
  13. Pub.handleResponse= function handleResponse(data,eleid){
  15.     //获取表单Form2的对象
  17.     var ele = $("#"+eleid);
  19.     //将返回的结果放置到表单Form2的元素中
  21.     ele.html(data);
  23. }
  25. /**

  27.  * @param sForm：传递表单Form1的名称
  29.  * @returns {String}：使用ajax返回服务器端的参数，传递的就是表单Form1中元素的参数
  31.  */
  33. Pub.getParams2Str=function getParams2Str(sForm){
  35.     var strDiv = "";
  37.     strDiv = $("#"+sForm).serialize();
  39.     return strDiv; 
  41. }

  43. /***
  45.  * Post请求
  47.  * domId：表单Form2的名称
  49.  * action：表示URL连接
  51.  * sForm：表单Form1的名称
  53.  */
  55. Pub.submitActionWithForm=function(domId,action,sForm){
  57.     var str = Pub.getParams2Str(sForm);
  59.     $.post(action,str,function(data){
  61.        Pub.handleResponse(data,domId);
  63.     })
  65. }

  67. /***
  69.  * Get请求
  71.  * domId：表单Form2的名称
  73.  * action：表示URL连接
  75.  * sForm：表单Form1的名称
  77.  */
  79. Pub.submitActionWithFormGet=function(domId,action,sForm){

  81.     $.get(action,{},function(data){
  83.        Pub.handleResponse(data,domId);
  85.     })
  87. }

6：DOM对象去掉空格的方法

  1. function LTrim(str)
  3. {
  5.     var i;
  7.     for(i=0;i<str.length;i++)
  9.     {
  11.         if(str.charAt(i)!=" "&&str.charAt(i)!=" ")break;
  13.     }
  15.     str=str.substring(i,str.length);
  17.     return str;
  19. }

  21. function RTrim(str)
  23. {
  25.     var i;
  27.     for(i=str.length-1;i>=0;i--)
  29.     {
  31.         if(str.charAt(i)!=" "&&str.charAt(i)!="?")break;
  33.     }
  35.     str=str.substring(0,i+1);
  37.     return str;
  39. }

  41. function Trim(str)
  43. {
  45.     return LTrim(RTrim(str));
  47. }

页面中使用

  1. if(Trim(document.Form1.keywordname.value)==""){
  3.             alert("请输入类型名称");
  5.             return false;
  6. }

7.附录：

        Jquery对象去掉空格：

  1. $.trim($(“#keywordname”).val());

        技术分享    

8：实现百分比效果的进度条

        分析原理：

技术分享

技术分享

技术分享

        面试的问到进度条如何实现：

结论：百分比进度条，实质上使用ajax在保存的过程中开启多个线程实现

其中一个线程：执行保存

执行保存的业务操作，同时计算页面返回的百分比数值，将计算的数值存放到Session中

在执行完保存的业务操作之后，即线程即将结束的时候，将Session清空

另一个线程：从Session总获取百分比的内容

获取百分比的内容

同时使用ajax将结果返回到页面上，使用js将数据填写到页面显示。

操作步骤：

请看【技术资料\进度条\进度条（百分比）】中的《进度条.doc》

1：在jsp上添加代码：这个table标签要隐藏，进度条执行的时候再显示

  1. <table id="load" width="700" border="0" align="center" bgcolor="#FAFAFA" cellpadding="0" cellspacing="0" bordercolor="#000000" style="border-collapse:collapse;display:none ">
  3.          <tr>
  5.            <td><br><br>
  7.            <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#287BCE" style="border-collapse:collapse ">
  9.                <tr bgcolor="#F7F7F6">
  11.                  <td width="20%" height="100" valign="middle">
  13.                          <table align=‘center‘ width=‘500‘>
  15.                            <tr>
  17.                             <td colspan=‘2‘ align=‘center‘ id="progressPersent"><font size="2">
  19.                              正在进行保存，用时较长，请稍后...
  21.                              </font>
  23.                             </td>
  25.                            </tr>
  27.                            <tr>
  29.                              <td id=‘tdOne‘ height=‘25‘ width=1 bgcolor="blue">&nbsp;</td>
  31.                              <td id=‘tdTwo‘ height=‘25‘ width=500 bgColor=‘#999999‘>&nbsp;</td>
  33.                            </tr>
  35.                          </table>
  37.                  </td>
  39.                </tr>
  41.            </table>
  43.            </td>
  45.          </tr>
  47.        </table>

2：添加js代码:

  1. var xmlHttp;
  3.        //创建ajax引擎
  5.        function createXMLHttpRequest() {
  7.            if (window.XMLHttpRequest) {
  9.                   xmlHttp = new XMLHttpRequest();
  11.              } else if (window.ActiveXObject) {
  13.                   try {
  15.                         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  17.                   } catch (e1) {
  19.                         try {
  21.                              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  23.                         } catch (e2) {
  25.                         }
  27.                   }
  29.              }
  31.        }

  33.        function loading() {
  35.               createXMLHttpRequest();
  37.               clearLoad();
  39.               var url = "elecCommonMsgAction_progressBar.do";
  41.               xmlHttp.open("GET", url, true);
  43.               xmlHttp.onreadystatechange = createCallback;
  45.               xmlHttp.send(null);
  47.        }

  49.        function createCallback() {
  51.               if (xmlHttp.readyState == 4) {
  53.                      if (xmlHttp.status == 200) {
  55.                             //每隔1秒钟执行一次percentServer()方法，直到当前访问结束
  57.                       setTimeout("percentServer()", 1000);
  59.                      }
  61.               }
  63.        }

  65.        function percentServer() {
  67.               createXMLHttpRequest();
  69.               var url = "elecCommonMsgAction_progressBar.do";
  71.               xmlHttp.open("GET", url, true);
  73.               xmlHttp.onreadystatechange = updateCallback;
  75.               xmlHttp.send(null);
  77.        }
  79.        function updateCallback() {
  81.               if (xmlHttp.readyState == 4) {
  83.                      if (xmlHttp.status == 200) {
  85.                             //获取XML数据中的percent存放的百分比的值
  87.                             var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
  89.                             var tdOne = document.getElementById("tdOne");
  91.                             var progressPersent = document.getElementById("progressPersent");
  93.                             //改变蓝色区域的宽度
  95.                       tdOne.width = percent_complete + "%";
  97.                             //将百分比的数值显示到页面上
  99.                       progressPersent.innerHTML = percent_complete + "%";
  101.                             //如果计算获取的百分比的数值没有达到100，则继续调用方法，直到操作结束为止
  103.                             if (percent_complete < 100) {
  105.                                    setTimeout("percentServer()", 1000);
  107.                             }
  109.                      }
  111.               }
  113.        }
  115.        function clearLoad() {
  117.               document.getElementById("load").style.display="";
  119.               document.getElementById("opperate1").style.display="none";
  121.            document.getElementById("opperate2").style.display="none";
  123.        }

3：在保存的submit()的方法后调用loading()方法。

4：在Action操作的类中定义：

  1. public String progressBar() throws Exception{
  3.               //从session中获取操作方法中计算的百分比
  5.               Double percent = (Double) ServletActionContext.getRequest().getSession().getAttribute("percent");
  7.               String res = "";
  9.               //此时说明操作的业务方法仍然继续在执行
  11.               if(percent!=null){
  13.                      //计算的小数，四舍五入取整
  15.                      int percentInt = (int) Math.rint(percent);
  17.                      res = "<percent>" + percentInt + "</percent>";
  19.               }
  21.               //此时说明操作的业务方法已经执行完毕，session中的值已经被清空
  23.               else{
  25.                      //存放百分比
  27.                      res = "<percent>" + 100 + "</percent>";
  29.       }
  31.               //定义ajax的返回结果是XML的形式
  33.               PrintWriter out = response.getWriter();
  35.               response.setContentType("text/xml");
  37.               response.setHeader("Cache-Control", "no-cache");
  39.               //存放结果数据，例如：<response><percent>88</percent></response>
  41.               out.println("<response>");
  43.               out.println(res);
  45.               out.println("</response>");
  47.               out.close();
  49.               return null;
  51.        }

5：在操作业务的方法中，进行测试：

  1. public String save(){
  3.               //模拟：循环遍历150条数据，观察百分比的变化情况
  5.               for(int i=1;i<=150;i++){
  7.                      elecCommonMsgService.saveCommonMsg(elecCommonMsg);
  9.                      ServletActionContext.getRequest().getSession().setAttribute("percent", (double)i/150*100);//存放计算的百分比
  11.               }
  13.               //线程结束时，清空当前session
  15.               ServletActionContext.getRequest().getSession().removeAttribute("percent");
  17.               return "save";
  19.        }
注意：可以在复杂的业务中将代码段分成点，一个点的进度是占百分之多少，然后存放到Session中，然后通过ajax调用服务从Session中获取值，返回进度并显示即可。 



国家电力项目-03

标签：

原文地址：http://www.cnblogs.com/duanmublog/p/4415925.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！