<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    背景

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

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

    附件:國家樹源碼

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

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

    運(yùn)行country.html 也是沒有任何東西,請問這是`?~~~~~  回復(fù)  更多評(píng)論
      
    主站蜘蛛池模板: 免费视频成人片在线观看| 美女啪啪网站又黄又免费| 999久久久免费精品播放| 在线观看亚洲精品福利片| 免费无码黄动漫在线观看| 亚洲日本va在线观看| 成人毛片18女人毛片免费| 国产精品亚洲mnbav网站 | 国产精彩免费视频| 亚洲国产乱码最新视频| 野花香高清视频在线观看免费| 久久亚洲综合色一区二区三区| 亚洲精品天堂无码中文字幕| 日本特黄特色aa大片免费| 成人国产网站v片免费观看| 国产AV无码专区亚洲AWWW| 久久青草免费91线频观看不卡| www.亚洲一区| 中文字幕亚洲男人的天堂网络 | 久久精品国产亚洲精品| 秋霞人成在线观看免费视频| 国产成人精品日本亚洲网址| 日韩在线视频免费看| 爱情岛论坛免费视频| 亚洲AV成人一区二区三区AV| 中文字幕影片免费在线观看 | 一区二区免费视频| 亚洲精品自在在线观看| 乱人伦中文视频在线观看免费| 毛片无码免费无码播放| 亚洲乱码一区二区三区国产精品| 国产亚洲精品免费| 亚洲精品自偷自拍无码| 91在线视频免费看| 一级毛片视频免费观看| 亚洲精品日韩中文字幕久久久| 嫩草影院在线播放www免费观看| 亚洲国产av一区二区三区丶| 亚洲av片一区二区三区| 99久久精品免费精品国产| 无码一区二区三区亚洲人妻|