背景

在jsp頁面錄入時(shí)，有這么一個(gè)字段“籍貫”，該字段可以用編碼表示，以便日后作統(tǒng)計(jì)分析操作，但這需對全國地區(qū)進(jìn)行編碼，共計(jì)4千條左右。為了方便用戶選擇，原本我使用的是struts + dtree實(shí)現(xiàn)的國家樹，這樣的問題是：需和后臺(tái)數(shù)據(jù)庫交互，頁面需要刷新，實(shí)時(shí)性較差。考慮全國地區(qū)編碼相對比較穩(wěn)定，所以我打算完全使用javascript實(shí)現(xiàn)。

要求

1、  根據(jù)當(dāng)前用戶所在地區(qū)編碼生成默認(rèn)的樹。

2、  將被點(diǎn)擊節(jié)點(diǎn)信息返回給父窗口。

思路

如果將全國地區(qū)樹一次性構(gòu)建完畢，由于包含的內(nèi)容太多，會(huì)引起瀏覽器崩潰，所以思路是只加載用戶需要加載的部分，也就是用戶點(diǎn)擊父節(jié)點(diǎn)時(shí)就加載其子節(jié)點(diǎn)。

問題

1、  全國地區(qū)信息的js保存。

2、  如何結(jié)合dtree的事件操作。

3、  與父窗口的交互。

解決

1、  全國地區(qū)信息的js保存

我使用js自定義對象，保存全國地區(qū)信息，定義兩個(gè)對象：Region和Country，Region是地區(qū)對象，Country是國家對象，包含若干Region對象。

// 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; //國家名稱               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的原理是：用戶初始化dtree對象的aNodes數(shù)組，數(shù)組中存放的是Node對象，然后調(diào)用dtree的tostring()方法生成樹狀html語法，主要是div和圖片鏈接。

dtree有一個(gè)s的方法，就是高亮顯示選中節(jié)點(diǎn)的方法，加入如下語法：

// Highlights the selected node dTree.prototype.s = function(id) {        if (!this.config.useSelection) return;        var cn = this.aNodes[id];               //--在該處添加以下語句，目的是在用戶點(diǎn)擊   //--node時(shí)向opener添加該node相關(guān)信息   this.allName = cn.name;   this.allId = cn.id;   this.parentNodePath(cn.pid);     //執(zhí)行用戶語法   eval(window.dialogArguments.imaginaryOperate);          if(cn.level == 'C' || cn.level == 'c'){               self.close();        }               //=============================================        //1、將dtree的節(jié)點(diǎn)對象保存到數(shù)組對象        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、銷毀dtree的節(jié)點(diǎn)對象        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、打開被點(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            功能：打開國家樹窗口                           參數(shù)：aId       父節(jié)點(diǎn)id                                  aOperate  節(jié)點(diǎn)返回?cái)?shù)據(jù)的操作                             //---詳細(xì)例程---//                             //opener.countPerYearConditionForm.regDepartment.value=cn.id                             //“=”之前指父窗口對象                             //“=”之后指可返回的值：cn.id        對應(yīng)id                             //                     cn.pid       對應(yīng)father_id                             //                     cn.name      對應(yīng)name                                                        //增加兩個(gè)參數(shù)：最終子節(jié)點(diǎn)到根節(jié)點(diǎn)的路由的name和id串                             //串接規(guī)則：小單位在前大單位在后，之間用"##"隔開                             //                    this.allName                             //                    this.allId                             //可以將多個(gè)操作寫入，之間以分號(hào)“；”隔開，例如：                             //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傳過去，這樣就實(shí)現(xiàn)了主父窗口交互。

附件：國家樹源碼