jquery综合应用实例
前台jsp页面：
<!-- system/addQaStandard.jsp --> <%@ page contentType="text/html;charset=GBK"%> <%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <link rel="stylesheet" href="<%=request.getContextPath()%>/css/css.css" type="text/css"> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/qaStandard/qaStandard.js"></script> <title>质检标准管理</title> </head> <body> <form name="form1" method="post" action="" target="mainFrame"> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="22" height="32" background="<%=request.getContextPath()%>/images/main/frame_q.jpg"> </td> <td background="<%=request.getContextPath()%>/images/main/frame_w.jpg" class="MainTitle">质检标准管理</td> <td width="22" height="32" background="<%=request.getContextPath()%>/images/main/frame_e.jpg"> </td> </tr> <tr> <td background="<%=request.getContextPath()%>/images/main/frame_a.jpg"> </td> <td valign="top" bgcolor="#EFEFEF"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#efefef"> <tr> <td class="SecondTitle">.:标准:.</td> </tr> <tr> <td bgcolor="#999999"> <table border="0" cellspacing="1" cellpadding="5" width="100%"> <tr width="100%"> <td width="12%" align="right" class="general-td">标准名称:</td> <td width="38%" align="left" class="general-td"> <input type="text" name="standardName1" class="inputbg" onkeyup="checkIfStandardNameDuplicated(this);"/> </td> <td width="12%" align="right" class="general-td">所属系统:</td> <td width="38%" align="left" class="general-td"> <select name="systemFlag" class="selectCtrl"> <option value="1">电销</option> </select> </td> </tr> <tr width="100%"> <td width="12%" align="right" class="general-td">销售结果:</td> <td width="38%" align="left" class="general-td"> <select name="isSuccessful" class="selectCtrl"> <option value="">请选择</option> <option value="Y">成功件</option> <option value="N">失败件</option> <option value="G">跟踪件</option> </select> </td> <td width="12%" align="right" class="general-td"></td> <td width="38%" align="left" class="general-td"></td> </tr> </table> </td> </tr> <tr> <td class="SecondTitle">.:大项:.</td> </tr> <tr> <td bgcolor="#999999"> <table border="0" cellspacing="1" cellpadding="5" width="100%"> <tbody> <tr width="100%"> <td width="12%" align="right" class="general-td">名称:</td> <td width="38%" align="left" class="general-td"> <input type="text" name="standardName2" class="inputbg"/></td> <td width="12%" align="right" class="general-td">分值:</td> <td width="38%" align="left" class="general-td"> <input type="text" name="standardScore2" class="inputbg"/> </td> </tr> <tr width="100%"> <td width="12%" align="right" class="general-td">排序序号:</td> <td width="38%" align="left" class="general-td"> <input type="text" name="standardOrder2" class="inputbg"/></td> <td width="12%" align="right" class="general-td"></td> <td width="38%" align="left" class="general-td"></td> </tr> <tr width="100%"> <td width="100%" align="center" class="general-td" colSpan="4"> <input name="add2" type="button" class="btn" value="继续添加" onclick="addBigQa(this);"> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="SecondTitle">.:小项:.</td> </tr> <tr> <td bgcolor="#999999"> <table border="0" cellspacing="1" cellpadding="5" width="100%"> <tbody> <tr> <td width="10%" align="right" class="general-td">所属大项:</td> <td width="20%" align="left" class="general-td"> <select name="parentItem"> <option value="">请选择</option> </select> </td> <td width="10%" align="right" class="general-td">名称:</td> <td width="20%" align="left" class="general-td"> <input type="text" name="standardName3" class="inputbg"/> </td> <td width="10%" align="right" class="general-td">分值:</td> <td width="30%" align="left" class="general-td"> <input type="text" name="standardScore3"class="inputbg"/> </td> </tr> <tr width="100%"> <td width="10%" align="right" class="general-td">瑕疵等级:</td> <td width="20%" align="left" class="general-td"> <select name="badLevel"> <c:forEach items="${defectLevelList}" var="defectLevel"> <option value='<c:out value="${defectLevel.paramValue}"/>'><c:out value="${defectLevel.paramName}"/></option> </c:forEach> </select> </td> <td width="10%" align="right" class="general-td">操作方式:</td> <td width="30%" align="left" class="general-td"> <select name="operation"> <option value="1">点选</option> <option value="2">手工输入</option> </select> </td> <td width="10%" align="right" class="general-td">排序序号:</td> <td width="20%" align="left" class="general-td"> <input type="text" name="standardOrder3" class="inputbg"/> </td> </tr> <tr width="100%"> <td width="12%" align="center" class="general-td" colspan="6"> <input name="add3" type="button" class="btn" value="继续添加" onclick="addSmallQa(this);"> </td> </tr> </tbody> <tr width="100%"> <td colspan="7" align="right" class="general-td"> <input name="save" type="button" class="btn" value="保存" onclick="saveStandard();"> <input name="back" type="button" class="btn" value="返回" onClick="returnSearch();"> </td> </tr> </table> </td> </tr> </table> </td> <td background="<%=request.getContextPath()%>/images/main/frame_d.jpg"> </td> </tr> <tr> <td width="22" height="26" background="<%=request.getContextPath()%>/images/main/frame_z.jpg"> </td> <td background="<%=request.getContextPath()%>/images/main/frame_x.jpg"> </td> <td background="<%=request.getContextPath()%>/images/main/frame_c.jpg"> </td> </tr> </table> </form> </body>
引用到的js脚本：
function addBigQa(obj){ var tr = obj.parentElement.parentElement; $('<tr width="100%">'+ '<td width="12%" align="right" class="general-td">名称:</td>'+ '<td width="38%" align="left" class="general-td"><input type="text" name="standardName2" class="inputbg" /></td>'+ '<td width="12%" align="right" class="general-td">分值:</td>'+ '<td width="38%" align="left" class="general-td"><input type="text" name="standardScore2" class="inputbg" /></td>'+ '</tr>'+ '<tr width="100%">'+ '<td width="12%" align="right" class="general-td">排序序号:</td>'+ '<td width="38%" align="left" class="general-td"><input type="text" name="standardOrder2" class="inputbg" /></td>'+ '<td width="12%" align="center" class="general-td" colSpan="2">'+ '<input name="add2" type="button" class="btn" value="删除" onclick="removeBigQa(this);"></td>'+ '</tr>').insertAfter(tr); } function removeBigQa(obj){ var tr2 = obj.parentElement.parentElement; var tr1 = tr2.previousSibling; $(tr2).remove(); $(tr1).remove(); } function addSmallQa(obj){ var tr = obj.parentElement.parentElement; $('<tr>'+ '<td width="10%" align="right" class="general-td">所属大项:</td>'+ '<td width="20%" align="left" class="general-td">'+ '<select name="parentItem">'+ '<option value="">请选择</option>'+ '</select>'+ '</td>'+ '<td width="10%" align="right" class="general-td">名称:</td>'+ '<td width="20%" align="left" class="general-td">'+ '<input type="text" name="standardName3" class="inputbg"/>'+ '</td>'+ '<td width="10%" align="right" class="general-td">分值:</td>'+ '<td width="30%" align="left" class="general-td">'+ '<input type="text" name="standardScore3"class="inputbg"/>'+ '</td>'+ '</tr>'+ '<tr width="100%">'+ '<td width="10%" align="right" class="general-td">瑕疵等级:</td>'+ '<td width="20%" align="left" class="general-td">'+ '<select name="badLevel">'+ '</select>'+ '</td>'+ '<td width="10%" align="right" class="general-td">操作方式:</td>'+ '<td width="30%" align="left" class="general-td">'+ '<select name="operation">'+ '<option value="1">点选</option>'+ '<option value="2">手工输入</option>'+ '</select>'+ '</td>'+ '<td width="10%" align="right" class="general-td">排序序号:</td>'+ '<td width="20%" align="left" class="general-td">'+ '<input type="text" name="standardOrder3" class="inputbg" />'+ '</td>'+ '</tr>'+ '<tr width="100%">'+ '<td width="12%" align="center" class="general-td" colspan="6">'+ '<input name="add3" type="button" class="btn" value="删除" onclick="removeSmallQa(this);">'+ '</td>'+ '</tr>').insertAfter(tr); $.getJSON( window.location.pathname, { "operation" : "fetchDefectLevel" }, function(data){ var badLevel = $('select[name="badLevel"]'); for(var i=0;i<badLevel.length;i++){ for(var j=0;j<data[0].defectLevelList.length;j++){ if(badLevel[i].options.length < data[0].defectLevelList.length){ $("<option></option>").val(data[0].defectLevelList[j].paramValue).text(data[0].defectLevelList[j].paramName).appendTo(badLevel[i]); } } } } ); refreshBigSelectList(); } function removeSmallQa(obj){ var tr3 = obj.parentElement.parentElement; var tr2 = tr3.previousSibling; var tr1 = tr2.previousSibling; $(tr3).remove(); $(tr2).remove(); $(tr1).remove(); } $('input[name="standardName2"]').live("change",function(){ refreshBigSelectList(); refreshParentItemSelectList(); }); $('input[name="standardScore2"]').live("blur",function(){ if($(this).val() != ""){ var score = $(this).val(); if(isNaN(score)){ $(this).val(""); }else{ if(score < 0 || score > 100){ $(this).val(""); } } } }); $('input[name="standardScore3"]').live("blur",function(){ if($(this).val() != ""){ var score = $(this).val(); if(isNaN(score)){ $(this).val(""); }else{ if(score < 0 || score > 100){ $(this).val(""); } } } }); $('input[name="standardOrder2"]').live("blur",function(){ if($(this).val() != ""){ var score = $(this).val(); if(isNaN(score)){ $(this).val(""); }else{ if(score < 1 || score > 9999){ $(this).val(""); } } } }); $('input[name="standardOrder3"]').live("blur",function(){ if($(this).val() != ""){ var score = $(this).val(); if(isNaN(score)){ $(this).val(""); }else{ if(score < 1 || score > 9999){ $(this).val(""); } } } }); function refreshBigSelectList(){ var parentItem = $('select[name="parentItem"]'); var standardName2 = $('input[name="standardName2"]'); parentItem.empty(); for(var i=0;i<parentItem.length;i++){ if(isBigSelectListNotNull(standardName2)){ for(var j=0;j<standardName2.length;j++){ if(standardName2[j].value != ""){ $("<option></option>").val(standardName2[j].value).text(standardName2[j].value).appendTo(parentItem[i]); } } }else{ $("<option></option>").val("").text("请选择").appendTo(parentItem[i]); } } } function refreshParentItemSelectList(){ var parentItem = $('select[name="parentItem"]'); for(var i=0;i<parentItem.length;i++){ var parentItem_nextSibling = parentItem[i].nextSibling; if(parentItem_nextSibling != null){ parentItem[i].parentElement.removeChild(parentItem_nextSibling); } if(parentItem[i].value==""){ $('<span style="color:red;">请先完善大项信息!</span>').insertAfter(parentItem[i]); } } } function isBigSelectListNotNull(standardName2){ var flag = false; for(var j=0;j<standardName2.length;j++){ if(standardName2[j].value != ""){ flag = true; break; } } return flag; } function saveStandard(){ var standardName1 = $('input[name="standardName1"]'); checkIfStandardNameDuplicated(standardName1[0]); var standardName1_nextSibling = standardName1[0].nextSibling; if(standardName1_nextSibling != null){ standardName1[0].parentElement.removeChild(standardName1_nextSibling); } if(standardName1[0].value == ""){ $('<span style="color:red;">标准名称不能为空!</span>').insertAfter(standardName1); } var isSuccessful = $('select[name="isSuccessful"]'); var isSuccessful_nextSibling = isSuccessful[0].nextSibling; if(isSuccessful_nextSibling != null){ isSuccessful[0].parentElement.removeChild(isSuccessful_nextSibling); } if(isSuccessful[0].value == ""){ $('<span style="color:red;">请选择销售结果!</span>').insertAfter(isSuccessful); } var standardName2 = $('input[name="standardName2"]'); for(var i=0;i<standardName2.length;i++){ var standardName2_nextSibling = standardName2[i].nextSibling; if(standardName2_nextSibling != null){ standardName2[i].parentElement.removeChild(standardName2_nextSibling); } if(standardName2[i].value == ""){ $('<span style="color:red;">大项名称不能为空!</span>').insertAfter(standardName2[i]); } } var standardName3 = $('input[name="standardName3"]'); for(var i=0;i<standardName3.length;i++){ var standardName3_nextSibling = standardName3[i].nextSibling; if(standardName3_nextSibling != null){ standardName3[i].parentElement.removeChild(standardName3_nextSibling); } if(standardName3[i].value == ""){ $('<span style="color:red;">小项名称不能为空!</span>').insertAfter(standardName3[i]); } } refreshParentItemSelectList(); return false; } function checkIfStandardNameDuplicated(obj){ var standardName1 = obj; var standardName1_nextSibling = standardName1.nextSibling; if(standardName1_nextSibling != null){ standardName1.parentElement.removeChild(standardName1_nextSibling); } if(standardName1.value == ""){ $('<span style="color:red;">标准名称不能为空!</span>').insertAfter(standardName1); }else{ $.ajax({ url: window.location.pathname, data: {"operation" : "checkStandardName","name":obj.value}, type:"post", contentType: "application/x-www-form-urlencoded; charset=utf-8", success: function(data){ if(data >= "1") { $('<span style="color:red;">标准名称已存在!</span>').insertAfter(standardName1); } }, error:function(){ alert("系统异常,请联系管理员！"); } }); } }
后台java代码：
package com.tpaic.qualityAssessment.web.controller.system; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import org.springframework.web.servlet.ModelAndView; import com.tpaic.qualityAssessment.dto.QaListParamDTO; import com.tpaic.qualityAssessment.web.controller.common.AbstractCommonController; import com.tpaic.qualityAssessment.web.util.CommonUtils; import com.tpaic.qualityAssessment.web.util.ServiceRequestId; import com.tpaic.tpfa.app.dto.AggregatedSearchDTO; public class AddQaStandardViewController extends AbstractCommonController { protected final Log logger = LogFactory.getLog(getClass()); protected ModelAndView handleRequestInternal(HttpServletRequest request,HttpServletResponse response) throws Exception { AggregatedSearchDTO aggregatedSearchDTO = CommonUtils.getAggregatedSearchDTO("QaListParam.searchDefectLevelByType","defectLevel"); String action = ServiceRequestId.AGGREGATED_SEARCH_ACTION; @SuppressWarnings("unchecked") List<QaListParamDTO> defectLevelList = (List<QaListParamDTO>) this.getDispatch().dispatchRequest(aggregatedSearchDTO, action); Map<String,Object> result = new HashMap<String,Object>(); String operation = request.getParameter("operation"); result.put("defectLevelList", defectLevelList); response.setCharacterEncoding("UTF-8"); if("fetchDefectLevel".equals(operation)){ response.getWriter().write(JSONArray.fromObject(result).toString()); return null; }else if("checkStandardName".equals(operation)){ String name = request.getParameter("name"); AggregatedSearchDTO aggregatedSearchDTOForStandardNameCount = CommonUtils.getAggregatedSearchDTO("QaStandard.SearchStandardForCount",name,false); String count = (String) this.getDispatch().dispatchRequest(aggregatedSearchDTOForStandardNameCount, action); response.getWriter().write(count); return null; }else{ return new ModelAndView(this.getSuccessView(),result); } } }