|
|
Posted on 2006-03-08 23:33 大大毛 閱讀(1362) 評論(1) 編輯 收藏 所屬分類: HTML
? ???從運行效果中可以看到幾個特點:
???1.普通的聯(lián)動;
???2.半選狀態(tài);
??????整個結(jié)構(gòu)呈樹型,下層節(jié)點的變動會反映為上層樹節(jié)點的選取狀態(tài),提供半選狀態(tài)是為了能夠更加形象的表示,
??????我非常不滿意普通的聯(lián)動只有"選取/不選"兩種,而我在此提供"部分選取"的狀態(tài)顯示;
???3.簡化/完全提交的功能
??????例如:
?????????提供一個表單用于顯示公司各個部門的員工,而讓你來選取合適的員工;
?????????非常多的情況下,操作者可能選取了一整個部門,而提交如果按員工來提交的話(完全提交),則提交的數(shù)據(jù)量會很大,
?????????而用這里的簡化提交就不同了,提交上去的會是一個部門ID以及零散員工ID,在處理時根據(jù)ID特征的不同來處理,應該能很大提升處理效率
源碼:
  HTML源碼
 <HTML>
<HEAD>
<TITLE>?Checkbox聯(lián)動演示?</TITLE>
<script?language="javascript">
 //特定的Checkbox類名前綴
var?myClassName?=?"ddmChk";
//特定的ID前綴
var?myID?=?"ID";
//特定的Name前綴
var?myName?=?"Name";
//頁面事件過濾
  function?filter()?{
????var?Obj?=?window.event.srcElement;
????//過濾條件:
????//????.是個Checkbox控件
????//????.其類名前綴為指定類名
????if?(Obj.type?==?"checkbox"?&&?Obj.className.indexOf(myClassName,0)?==?0){
????????down(Obj);
????????up(Obj);
????}else{
????????//show("");
 ????}
}
//向下處理子控件,使之與當前控件同步
//theObj:當前處理的控件對象
function?down(theObj)?{
????//設(shè)置當前控件的子控件同步
????//得到子控件:
????//????.ID前綴?+?當前控件有效ID(記錄在Name屬性中)
????var?subObjects;
????var?subObjectID;
????if(theObj?!=?null)?{
????????subObjectID?=?myID?+?theObj.name.substring(myName.length);
????????subObjects?=?document.all(subObjectID);
????????if(subObjects?!=?null)?{
????????????//show(subObjectID?+?":"?+?subObjects.length);
????????????if(subObjects.length)?{
????????????????//一組子控件
????????????????for(var?i=0;i<subObjects.length;i++)?{
????????????????????subObjects[i].checked?=?theObj.checked;
????????????????????//向下遞歸
????????????????????down(subObjects[i]);
????????????????}
????????????}else{
????????????????//單個控件
????????????????subObjects.checked?=?theObj.checked;
????????????}
????????}
????}else{
????????return;
????}
}
//向上
function?up(theObj)?{
????var?bortherObj;
????var?parentObj;
????var?parentObjName;
????var?flag?=?0;
????if((theObj?!=?null)?&&?(theObj.id.length?>?myID.length))?{
????????//得到父控件Name
????????//????.Name前綴?+?當前控件的ID
????????parentObjName?=?myName?+?theObj.id.substring(myID.length);
????????parentObj?=?document.all(parentObjName);
????????if(parentObj?!=?null)?{
????????????bortherObj?=?document.all(theObj.id);
????????????if(bortherObj.length)?{
????????????????//有平行的兄弟控件,檢查條件:
????????????????//????.checked值不同
????????????????//????.中間有一個的indeterminate狀態(tài)為真
????????????????for(var?i=0;i<bortherObj.length;i++)?{
????????????????????if((bortherObj[i].checked?!=?theObj.checked)?||?bortherObj[i].indeterminate?||?theObj.indeterminate)?{
????????????????????????flag?=?1;
????????????????????????break;
????????????????????}
????????????????}
????????????????if(flag?==?0)?{
????????????????????//兄弟伙的狀態(tài)一致,且indeterminate狀態(tài)為假
????????????????????parentObj.checked?=?theObj.checked;
????????????????????parentObj.indeterminate?=?false;
????????????????}else{
????????????????????parentObj.checked?=?true;
????????????????????parentObj.indeterminate?=?true;
????????????????}
????????????}else{
????????????????//單獨一個
????????????????parentObj.checked?=?theObj.checked;
????????????????parentObj.indeterminate?=?theObj.indeterminate;
????????????}
????????????//向上遞歸
????????????up(parentObj);
????????}else{
????????????return;
????????}
????}else{
????????return;
????}
}
//得到Checkbox的值
//????.theObj:起始處的對象
//????.submitType:提交類型(0--完全;1--簡化)
function?getChkValue(theObj,submitType,result)?{
????var?ID?=?"";
????var?subObjects;
????var?subObjectID;
????if(theObj?!=?null)?{
????????if(theObj.indeterminate)?{
????????????//不確定狀態(tài)
????????????//視同于未選擇狀態(tài)
????????}else{
????????????//記錄當前對象
????????????result?+=?(theObj.checked?(","?+?theObj.name.substring(myName.length)):"");
????????????if(submitType?==?1)?{
????????????????//簡化提交類型
????????????????return?result;
????????????}else{
????????????????//完全提交類型
????????????}
????????}
????????//向下遞歸
????????subObjectID?=?myID?+?theObj.name.substring(myName.length);
????????subObjects?=?document.all(subObjectID);
????????if(subObjects?!=?null)?{
????????????if(subObjects.length)?{
????????????????for(var?i=0;i<subObjects.length;i++)?{
????????????????????result?=?getChkValue(subObjects[i],submitType,result);
????????????????}
????????????}else{
????????????????result?+=?(subObjects.checked?(","?+?subObjects.name.substring(myName.length)):"");
????????????}
????????}
????}else{
????????return?result;
????}
????return?result;
}
//提交用
function?mySubmit()?{
????var?result?=?"";
????result?=?getChkValue(document.all("Name01"),(submitType.checked?0:1),result);
????if(result?!=?"")?{
????????result?=?result.substring(1);
????}
????show(result);
????return?false;
}
//顯示用
function?show(msg)?{
????document.all("show").value?=?msg;
}
 document.onclick?=?filter;
</script>
</HEAD>
<BODY>
????<table?width="100%"?cellspacing="0"?cellpadding="0">
????????<tr?height="60pt">
????????????<td><pre?id="readme">說明</pre></td>
????????</tr>
????????<tr?height="60pt">
????????????<td><pre>
????????????演示Checkbox聯(lián)動
????Checkbox.class:用于事件過濾
????Checkbox.id:???用于表示層次關(guān)系,子對象的ID?=?父對象的標識
????Checkbox.name:?用于保存對象的標識
????????????</pre></td>
????????</tr>
????????<tr>
????????????<td><input?type="checkbox"?class="ddmChkRoot"?id="ID"?name="Name01">01</input></td>
????????</tr>
????????<tr><td>
????????????<input?type="checkbox"?class="ddmChk"?id="ID01"?name="Name0101">0101</input></td>
????????</tr>
????????<tr><td>
????????????<input?type="checkbox"?class="ddmChk"?id="ID0101"?name="Name010101">010101</input></td>
????????</tr>
????????<tr><td>
????????????<input?type="checkbox"?class="ddmChk"?id="ID0101"?name="Name010102">010102</input></td>
????????</tr>
????????<tr><td>
????????????<input?type="checkbox"?class="ddmChk"?id="ID010102"?name="Name01010201">01010201</input></td>
????????</tr>
????????<tr><td>
????????????<input?type="checkbox"?class="ddmChk"?id="ID01"?name="Name0102">0102</input></td>
????????</tr>
????????<tr><td>
????????????<input?type="checkbox"?class="ddmChk"?id="ID0102"?name="Name010201">010201</input></td>
????????</tr>
????????<tr><td>
????????????<input?type="checkbox"?class="ddmChk"?id="ID01"?name="Name0103">0103</input></td>
????????</tr>
????????<tr><td>
????????????<input?id="show"?size="100"></input></td>
????????</tr>
????????<tr><td>
????????????<input?type="checkbox"?id="submitType"?onclick="submitTypeName.innerText=(this.checked?'完全':'簡單');"><b?id="submitTypeName">簡單</b>提交類型</input>
????????????<form?onsubmit="return?mySubmit();?">
????????????<input?type="submit"></input>
????????????</form>
????????????</td>
????????</tr>
????</table>
</BODY>
<script?language="javascript">
????var?readme?=????"<font?size=2>";
????readme?+=????????"<font?size=6>Checkbox聯(lián)動演示</font>"?+?"<br>";
????readme?+=????????"作者:大大毛"?+?"<br>";
????readme?+=????????"修改日期:2006/01/19"?+?"<br>";
????readme?+=????????"</font>";
????document.all.readme.innerHTML?=?readme;
</script>
</HTML>
評論
# re: Checkbox聯(lián)動演示 回復 更多評論
2011-06-30 23:14 by
dcdc
|