背景

          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ì)象:RegionCountryRegion是地區(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)用dtreetostring()方法生成樹(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)idoperate的虛變量,也作為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)的路由的nameid

                                      //串接規(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)idoperate的虛變量,傳遞參數(shù)是將window傳過(guò)去,這樣就實(shí)現(xiàn)了主父窗口交互。

          附件:國(guó)家樹(shù)源碼

          posted on 2006-03-08 21:23 野草 閱讀(1347) 評(píng)論(1)  編輯  收藏 所屬分類(lèi): html/js

          評(píng)論:
          # re: 使用js構(gòu)建的國(guó)家樹(shù)[未登錄](méi) 2007-04-16 16:57 | TEST
          大哥。牛X 可是。我下了你的以后。。我運(yùn)行TEST。。要我輸入值 輸入ID和父ID 再點(diǎn)了以后,卻沒(méi)有任何東西。。

          運(yùn)行country.html 也是沒(méi)有任何東西,請(qǐng)問(wèn)這是`?~~~~~  回復(fù)  更多評(píng)論
            
          主站蜘蛛池模板: 昆山市| 沙洋县| 栖霞市| 务川| 安徽省| 应城市| 武城县| 汾西县| 井研县| 吴江市| 汉川市| 诸城市| 茂名市| 萨嘎县| 临武县| 台前县| 清流县| 邢台县| 垣曲县| 宁夏| 正阳县| 新密市| 昆山市| 泸水县| 黄浦区| 长武县| 龙泉市| 县级市| 聊城市| 思南县| 托克托县| 定西市| 青阳县| 广南县| 博客| 赣榆县| 东海县| 瑞金市| 滕州市| 内黄县| 涪陵区|