背景
在jsp頁(yè)面錄入時(shí),有這么一個(gè)字段“籍貫”,該字段可以用編碼表示,以便日后作統(tǒng)計(jì)分析操作,但這需對(duì)全國(guó)地區(qū)進(jìn)行編碼,共計(jì)4千條左右。為了方便用戶(hù)選擇,原本我使用的是struts + dtree實(shí)現(xiàn)的國(guó)家樹(shù),這樣的問(wèn)題是:需和后臺(tái)數(shù)據(jù)庫(kù)交互,頁(yè)面需要刷新,實(shí)時(shí)性較差。考慮全國(guó)地區(qū)編碼相對(duì)比較穩(wěn)定,所以我打算完全使用javascript實(shí)現(xiàn)。
要求
1、 根據(jù)當(dāng)前用戶(hù)所在地區(qū)編碼生成默認(rèn)的樹(shù)。
2、 將被點(diǎn)擊節(jié)點(diǎn)信息返回給父窗口。
思路
如果將全國(guó)地區(qū)樹(shù)一次性構(gòu)建完畢,由于包含的內(nèi)容太多,會(huì)引起瀏覽器崩潰,所以思路是只加載用戶(hù)需要加載的部分,也就是用戶(hù)點(diǎn)擊父節(jié)點(diǎn)時(shí)就加載其子節(jié)點(diǎn)。
問(wèn)題
1、 全國(guó)地區(qū)信息的js保存。
2、 如何結(jié)合dtree的事件操作。
3、 與父窗口的交互。
解決
1、 全國(guó)地區(qū)信息的js保存
我使用js自定義對(duì)象,保存全國(guó)地區(qū)信息,定義兩個(gè)對(duì)象:Region和Country,Region是地區(qū)對(duì)象,Country是國(guó)家對(duì)象,包含若干Region對(duì)象。
// Region object function Region(id, pid, name, level) {
this.id = id; //節(jié)點(diǎn)id this.pid = pid; //父節(jié)點(diǎn)id this.name = name; //節(jié)點(diǎn)name
this.level = level; //節(jié)點(diǎn)級(jí)別
}; // Country object function Country(objName) {
this.name = objName; //國(guó)家名稱(chēng)
this.regions = []; //地區(qū)容器
this.init(); //初始化地區(qū)
}; // Init country Country.prototype.init = function() { this.regions[this.regions.length] = new Region('00011010100000','00011000000000','東城區(qū)','C'); this.regions[this.regions.length] = new Region('00011010200000','00011000000000','西城區(qū)','C'); this.regions[this.regions.length] = new Region('00011010300000','00011000000000','崇文區(qū)','C'); } |
2、 如何結(jié)合dtree的事件操作
dtree的原理是:用戶(hù)初始化dtree對(duì)象的aNodes數(shù)組,數(shù)組中存放的是Node對(duì)象,然后調(diào)用dtree的tostring()方法生成樹(shù)狀html語(yǔ)法,主要是div和圖片鏈接。
dtree有一個(gè)s的方法,就是高亮顯示選中節(jié)點(diǎn)的方法,加入如下語(yǔ)法:
// Highlights the selected node dTree.prototype.s = function(id) { if (!this.config.useSelection) return; var cn = this.aNodes[id];
//--在該處添加以下語(yǔ)句,目的是在用戶(hù)點(diǎn)擊 //--node時(shí)向opener添加該node相關(guān)信息 this.allName = cn.name; this.allId = cn.id; this.parentNodePath(cn.pid);
//執(zhí)行用戶(hù)語(yǔ)法 eval(window.dialogArguments.imaginaryOperate);
if(cn.level == 'C' || cn.level == 'c'){ self.close(); }
//============================================= //1、將dtree的節(jié)點(diǎn)對(duì)象保存到數(shù)組對(duì)象 regions = []; for(i = 0;i < d.aNodes.length;i ++){ regions[regions.length] = new Region(d.aNodes[i].id,d.aNodes[i].pid,d.aNodes[i].name,d.aNodes[i].level); }
//2、銷(xiāo)毀dtree的節(jié)點(diǎn)對(duì)象 d.aNodes = [];
//3、獲得點(diǎn)擊節(jié)點(diǎn)的子節(jié)點(diǎn) sRegions = country.getSonRegionsByPid(cn.id);
//4、將子節(jié)點(diǎn)加入到regions中,注意已有就不應(yīng)再加入 for(i = 0;i < sRegions.length;i ++){ flag = true; for(j = 0;j < regions.length;j ++){ if(sRegions[i].id == regions[j].id){ flag = false; break; } } if(flag) regions[regions.length] = sRegions[i]; }
//5、重新構(gòu)造dtree for(i = 0;i<regions.length;i++){ d.add(regions[i].id,regions[i].pid,regions[i].name,regions[i].level); }
document.getElementById('dtree').innerHTML = d.toString();
//6、打開(kāi)被點(diǎn)擊的點(diǎn) d.openTo(cn.id); //=============================================
/* if (cn._hc && !this.config.folderLinks) return; if (this.selectedNode != id) { if (this.selectedNode || this.selectedNode==0) { eOld = document.getElementById("s" + this.obj + this.selectedNode); eOld.className = "node"; } eNew = document.getElementById("s" + this.obj + id); eNew.className = "nodeSel"; this.selectedNode = id; if (this.config.useCookies) this.setCookie('cs' + this.obj, cn.id); } */ }; |
3、 與父窗口的交互
<script language="javascript"> <!-- //用以存放初始節(jié)點(diǎn)id和operate的虛變量,也作為window的變量 var imaginaryId; var imaginaryOperate; /* showTreeDialog 功能:打開(kāi)國(guó)家樹(shù)窗口 參數(shù):aId 父節(jié)點(diǎn)id aOperate 節(jié)點(diǎn)返回?cái)?shù)據(jù)的操作 //---詳細(xì)例程---// //opener.countPerYearConditionForm.regDepartment.value=cn.id //“=”之前指父窗口對(duì)象 //“=”之后指可返回的值:cn.id 對(duì)應(yīng)id // cn.pid 對(duì)應(yīng)father_id // cn.name 對(duì)應(yīng)name //增加兩個(gè)參數(shù):最終子節(jié)點(diǎn)到根節(jié)點(diǎn)的路由的name和id串 //串接規(guī)則:小單位在前大單位在后,之間用"##"隔開(kāi) // this.allName // this.allId //可以將多個(gè)操作寫(xiě)入,之間以分號(hào)“;”隔開(kāi),例如: //window.dialogArguments.regionname.value=this.allName;window.dialogArguments.regionid.value=cn.id; aWidth 窗口的寬度 aHeight 窗口的高度 */ function showTreeDialog(aId,aOperate,aWidth,aHeight) { imaginaryId = aId; imaginaryOperate = aOperate;
_feature="status:no;help:no;dialogHeight:"+aHeight+"px;dialogWidth:"+aWidth+"px";
window.showModalDialog('country.html',window,_feature) } --> </script> |
注意:其中多定義了兩個(gè)用以存放初始節(jié)點(diǎn)id和operate的虛變量,傳遞參數(shù)是將window傳過(guò)去,這樣就實(shí)現(xiàn)了主父窗口交互。