在項目維護中，客戶提出的新需求。
以前那個用得好好的又要改。
以前是這樣的：
要改成這樣：
一看。這個就隻要改頁面加js代碼。和控制層沒有一毛錢關系。
首先這個控件的代碼：
<td class="formLabel">檢驗項目</td>
<td colspan="3">
<table>
<tr><td colspan="3">
<input type="text" οnkeyup="valueChange(this.value,'${sampleEntry.key}')" id="examsName"/>(請輸入模糊查詢條件)
</td></tr>
<tr>
<spring:bind path="suit.samples[${sampleEntry.key}].examIds">
<sql:query dataSource="${dataSource}" var="examResult">
select * from exams where kind_id=${sample.kind.id} and DISABLED='N' order by id
</sql:query>
<td width="250">
<select id="selectTable${sampleEntry.key}" οndblclick="dbclickEvent('selectTable${sampleEntry.key}','authTables${sampleEntry.key}')" multiple="multiple" style="width: 295;height: 300">
<c:forEach var="exams" items="${examResult.rows}">
<option value="${exams.id}">${exams.name}[<fmt:formatNumber value="${exams.cost}" type="currency" pattern="￥.00"/>](${exams.standardNo})</option>
</c:forEach>
</select>
<div style="display:none">
<select id="fakeTable${sampleEntry.key}" multiple="multiple" style="width: 295;height: 300"></select>
</div>
</td>
<td width="50" align="center">
<button type="button" style="width:20px;height: 19px;" οnclick="addTable('selectTable${sampleEntry.key}','authTables${sampleEntry.key}')" >-></button><br><br>
<button type="button" style="width:20px;height: 19px;" οnclick="delTable('authTables${sampleEntry.key}','selectTable${sampleEntry.key}')" ><-</button>
</td>
<td>
<select name="${status.expression}" class="tab"
multiple="multiple" id="authTables${sampleEntry.key}" style="width: 295;height: 300">
<c:forEach var="exams" items="${status.value}">
<sql:query dataSource="${dataSource}" var="e">
select * from exams where id=${exams} and kind_id=${sample.kind.id}
</sql:query>
<c:forEach var="exam" items="${e.rows}">
<option value="${exam.id}">${exam.name}[<fmt:formatNumber value="${exam.cost}" type="currency" pattern="￥.00"/>](${exam.standardNo})</option>
</c:forEach>
</c:forEach>
</select>
<div style="display:none">
<itownet:checkbox name="${status.expression}" value="${status.value}"
sql="select id, name as label from exams where kind_id=${sample.kind.id} and DISABLED='N' order by order_no,id"
labelField="label" valueField="id"
columns="3" style="" styleClass="noborder ${sampleEntry.key}"/></div>
<pre name="code" class="html"> </td>
</spring:bind>
</tr>
</table>
</td>
這個方法是添加和修改通用的，是以寫代碼的時候還注意了頁面加載時就有可能是有值的，而且這個項目用的架構比較老不能用ajax。有點小麻煩。
剛開始是左邊多選下拉框的頁面加載，要注意幾點：
首先是直接從資料庫拿集合，sql語句直接寫在頁面的，需要連接配接池：
擷取資料庫聯接資料<%
Object ds = org.springframework.web.context.support.WebApplicationContextUtils
.getRequiredWebApplicationContext(application).getBean("dataSource");
application.setAttribute("dataSource", ds);
%>
這個是直接擷取檔案：
然後還要排除修改的時候已經選了的那些選項，加載到右邊的多選下拉框裡去。
實作這些操作的js：
<script type="text/javascript">
function addValue(fromId,toId,judge){
$("#"+toId).find("option:selected").each(function(){
$(this).attr("selected",false);
});
$("#"+fromId).find("option:selected").each(function(){
var val=this.value;
if($("#"+toId).find("option[value='"+val+"']").length==0){
var optionObj=$(this).clone();
$("#"+toId).append(optionObj.prepend(""));
}
$($("#"+toId).find("option[value='"+val+"']")).attr("selected",true);
$(this).remove();
//給隐藏的checkbox選中或取消選中值，以供送出
$("."+'${sampleEntry.key}').each(function(){
if(val==this.value){
$(this).attr("checked",judge);
}
});
});
}
function addTable(fromId,toId){//左移到右
addValue(fromId,toId,true);
}
function dbclickEvent(fromId,toId){//輕按兩下添加
addValue(fromId,toId,true);
}
function delTable(fromId,toId){//右移到左
addValue(fromId,toId,false);
}
var oldValue="";
function valueChange(newValue,number){//模糊查詢
if (oldValue!=newValue){
var v=newValue;
$("#selectTable"+number+" option").each(function(){//循環左邊多選下拉框
var sear=new RegExp(v);
if(!sear.test($(this).attr("innerText"))){//！判斷多選下拉框中含文本框的值的那些值
var val=this.value;
var optionObj=$(this).clone();
$("#fakeTable"+number).append(optionObj.prepend(""));
$($("#fakeTable"+number).find("option[value='"+val+"']")).attr("selected",false);//把不屬于的全部移到隐藏的多選下拉框中
$(this).remove();//并删除
}
});
$("#fakeTable"+number+" option").each(function(){//循環隐藏多選下拉框
var sear=new RegExp(v);
if(sear.test($(this).attr("innerText"))){//判斷隐藏多選下拉框中含文本框的值的那些值
var val=this.value;
var optionObj=$(this).clone();
$("#selectTable"+number).append(optionObj.prepend(""));
$($("#selectTable"+number).find("option[value='"+val+"']")).attr("selected",false);//把符合的全部移到顯示多選下拉框中
$(this).remove();//并删除
}
});
oldValue = newValue;
}
}
</script>
<script type="text/javascript">
$(function(){//窗體加載前删除左多選下拉框裡右多選下拉框有的值
$("#authTables"+'${sampleEntry.key}'+" option").each(function(){
var val=this.value;
$("#selectTable"+'${sampleEntry.key}'+" option").each(function(){
if(this.value==val){
$(this).remove();
}
});
});
});
</script>
因為我的這個是樣品中的一個小屬性，可能有多個樣品，也就是說一個頁面上可能有多個這樣的下拉框。為了更好的區分，我就給他們加上了樣品的id，而且這個js是放在一個樣品的裡面的，而不是放在頁面頂部或是尾部。
還想起一個問題：對于那個模糊查詢的，其實按道理正規的不是這麼寫的，我百度過，因為這個左邊下拉框沒辦法做到又重新進資料庫查一次，所有應該要搞個集合儲存一下，可是當時這個集合要儲存的相當于一個對象的集合，有id和name，最好是用json儲存，然後每次模糊查詢的時候再到這個json集合裡面查詢顯示出來，好麻煩的。當時已經花了好幾天了，于是就想到了一個呆的點的辦法：搞個隐藏的多選下拉框，這兩個裡面的值來回移動，反正另一個看不到，資料不删掉也不會丢，模糊查詢以外的就先藏起來，再一次模糊的時候又挑選一次，自我感覺挺友善的。哈哈
嗯嗯。貌似應該就是這些了。因為是寫完了很久了才寫的這個文章，是以有可能哪裡忘了吧。主要是前段時間都沒什麼空，唉。就這麼一個小點點的修改花了我好長時間呢，主要是js寫太多了，當時還要一個個去試。好麻煩啊。等我到時候發現了什麼問題再加上來吧。
确實忘了點小東西。不過又完善了下。是以直接把改了的放上來了。