jquery综合应用实例
浏览数：20 /
时间：2015年06月09日
前台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);
}
}
}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
