摘要：最近項目中用到了jquery，ajax，由于很長時間沒用了，所以這次做花了很多時間，現在記錄一下，方便以后回憶：
一：js文件：
<script type="text/javascript">// 進出港顯示字段權限分配function jingchugang(){var tableName = $('input:radio:checked').val();$.ajax({type:"POST",url:"<s:url value='/u/showFieldSet'/>",data:"tableName="+tableName,dataType:"json",success:function(dataMap){var fieldList = dataMap.fieldList;if(fieldList != null && fieldList.length > 0){//var start = "<select id='selectL' name='selectL' multiple='multiple'>";//var str = '';for(var i = 0; i< fieldList.length; i++){//str += "<tr><td><input type='checkbox' id='fieldName' name='fieldName'/>"+fieldList[i].fieldName+"<td></tr>";//str += "<option value='"+fieldList[i].id+"'>"+fieldList[i].fieldName+"</option>";$("<option value='"+fieldList[i].id+"'>"+fieldList[i].fieldName+"</option>").appendTo("#selectL");}//var end = "</select>";//$("str").appendTo("#selectL");}},});}
</script>二：jsp文件：
<tr class="even"><td><div class="select_side"><p>待選區</p><select id="selectL" name="selectL" multiple="multiple"></select></div><div class="select_opt"><p id="toright" title="添加">></p><p id="toleft" title="移除"><</p></div><div class="select_side"><p>已選區</p><select id="selectR" name="selectR" multiple="multiple"></select></div><div class="sub_btn"><input type="button" id="sub" value="getValue" /></div></td></tr>三：最后我把這個頁面附上：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ include file="../../common/include_tag.jsp"%>
<%@ include file="../../common/page_var.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><%=pageTitle%></title>
<link href="<s:url value='/images/favicon.ico'/>" rel="shortcut icon"type="image/x-icon" />
<%@ include file="../../common/page_head.jsp"%>
<script type="text/javascript">$(function() {pilicat.title2div('title2div');pilicat.keysubmit('form1', 'submit', true);});
</script>
<script type="text/javascript">
$(function(){var leftSel = $("#selectL");var rightSel = $("#selectR");$("#toright").bind("click",function(){ leftSel.find("option:selected").each(function(){$(this).remove().appendTo(rightSel);});});$("#toleft").bind("click",function(){ rightSel.find("option:selected").each(function(){$(this).remove().appendTo(leftSel);});});leftSel.dblclick(function(){$(this).find("option:selected").each(function(){$(this).remove().appendTo(rightSel);});});rightSel.dblclick(function(){$(this).find("option:selected").each(function(){$(this).remove().appendTo(leftSel);});});$("#sub").click(function(){var showFields = [];rightSel.find("option").each(function(){showFields.push(this.value);});showFields = showFields.join(",");if(showFields == ""){alert("沒有選擇任何項！");}else{alert(showFields);}});});
</script>
<script type="text/javascript">// 進出港顯示字段權限分配function jingchugang(){var tableName = $('input:radio:checked').val();$.ajax({type:"POST",url:"<s:url value='/u/showFieldSet'/>",data:"tableName="+tableName,dataType:"json",success:function(dataMap){var fieldList = dataMap.fieldList;if(fieldList != null && fieldList.length > 0){//var start = "<select id='selectL' name='selectL' multiple='multiple'>";//var str = '';for(var i = 0; i< fieldList.length; i++){//str += "<tr><td><input type='checkbox' id='fieldName' name='fieldName'/>"+fieldList[i].fieldName+"<td></tr>";//str += "<option value='"+fieldList[i].id+"'>"+fieldList[i].fieldName+"</option>";$("<option value='"+fieldList[i].id+"'>"+fieldList[i].fieldName+"</option>").appendTo("#selectL");}//var end = "</select>";//$("str").appendTo("#selectL");}},});}
</script>
<script type="text/javascript">$(document).ready(function() {$('#form1').ajaxForm({dataType : 'json',beforeSubmit : checkForm,success : afterPost});});function checkForm(formData, jqForm, options) {alert(formData);}function afterPost(responseText, statusText, xhr, $form) {if (responseText.resultStatus == true) {parent.$.jBox.tip("保存成功，請刷新查看結果", "success", {timeout : 2000});parent.$.jBox.close(true);} else {$.jBox.error("保存失敗", "失敗信息");}}function submitForm() {getSelectAll();}
</script>
<style type="text/css">
.update {margin: 0 auto;padding: 0;width: 98%;
}.update td {margin: 0;height: 30px;padding: 5px;
}.update .name {text-align: right;
}.title_div {width: 350px;
}body {background: url("<s:url value='/images/gray_bg.png'/>") 0 0 repeat-y#F6F6F6;
}
</style>
<style type="text/css">
.select_side {float: left;width: 200px
}select {width: 180px;height: 120px
}.select_opt {float: left;width: 40px;height: 100%;margin-top: 36px
}.select_opt p {width: 26px;height: 26px;margin-top: 6px;background: url("<s:url value='/images/arr.gif'/>") no-repeat;cursor: pointer;text-indent: -999em
}.select_opt p#toright {background-position: 2px 0
}.select_opt p#toleft {background-position: 2px -22px
}
</style>
</head>
<body><div class="rounded table"><table width="100%" cellpadding="0" cellspacing="0" border="0" class="box_top"><tbody><tr><td class="title"></td><td></td></tr></tbody></table><div class="error rounded top_error hide"><ol></ol><span></span></div><form:form id="form1" commandName="roleInfo" action="${pageContext.request.contextPath}/u/saveRoleShowField" method="post"><table class="update" cellpadding="0" cellspacing="1" border="0"><tbody><tr class="even"><td>角色名稱： ${roleInfo.roleName }<input type="hidden" name="id" value="${roleInfo.id}" /><input type="hidden" name="showFields" value="${showFields}" /></td></tr><tr class="even"><td>航班類型：<c:forEach items="${tableNameList}" var="tableName"><c:if test="${tableName == 'TB_CMS_FLGTINFO_D'}"><input type="radio" class="radio" name="tableName" id="TB_CMS_FLGTINFO_D" value="${tableName }" οnclick="jingchugang(${tableName});" />出港列表</c:if><c:if test="${tableName == 'TB_CMS_FLGTINFO_A'}"><input type="radio" class="radio" name="tableName" id="TB_CMS_FLGTINFO_A" value="${tableName }" οnclick="jingchugang(${tableName});"/>進港列表</c:if></c:forEach></td></tr><tr class="even"><td>賦予的顯示字段列表：</td></tr><!-- <tr class="even"><td><div id="menuTree"></div></td></tr> --><tr class="even"><td><div class="select_side"><p>待選區</p><select id="selectL" name="selectL" multiple="multiple"></select></div><div class="select_opt"><p id="toright" title="添加">></p><p id="toleft" title="移除"><</p></div><div class="select_side"><p>已選區</p><select id="selectR" name="selectR" multiple="multiple"></select></div><div class="sub_btn"><input type="button" id="sub" value="getValue" /></div></td></tr><%-- <tr class="even"><td>賦予的顯示字段列表：</td></tr><tr class="even"><td><form:checkboxes items="${roleShowEntities }" path="showFields" itemLabel="fieldName" itemValue="id" delimiter=""/></td></tr> --%></tbody></table><table class="table top_line"><tbody><tr><td align="center" height="60"><a id="submit" class="submit"href="javascript:;" οnclick="submitForm();">保存</a></td></tr></tbody></table></form:form></div>
</body>
</html>
