背景

在jsp页面录入时，有这么一个字段“籍贯”，该字段可以用编码表示，以便日后作统计分析操作，但这需对全国地区进行编码，共计4千条左右。为了方便用户选择，原本我使用的是struts + dtree实现的国家树，这样的问题是：需和后台数据库交互，页面需要刷新，实时性较差。考虑全国地区编码相对比较稳定，所以我打算完全使用javascript实现。

要求

1、  根据当前用户所在地区编码生成默认的树。

2、  将被点击节点信息返回给父窗口。

思路

如果将全国地区树一次性构建完毕，由于包含的内容太多，会引起浏览器崩溃，所以思路是只加载用户需要加载的部分，也就是用户点击父节点时就加载其子节点。

问题

1、  全国地区信息的js保存。

2、  如何结合dtree的事件操作。

3、  与父窗口的交互。

解决

1、  全国地区信息的js保存

我使用js自定义对象，保存全国地区信息，定义两个对象：Region和Country，Region是地区对象，Country是国家对象，包含若干Region对象。

// Region object function Region(id, pid, name, level) {               this.id = id; //节点id          this.pid = pid; //父节点id          this.name = name;  //节点name               this.level = level; //节点级别        };   // Country object function Country(objName) {                     this.name = objName; //国家名称               this.regions = [];  //地区容器               this.init(); //初始化地区        };   // Init country Country.prototype.init = function() {                  this.regions[this.regions.length] = new Region('00011010100000','00011000000000','东城区','C');             this.regions[this.regions.length] = new Region('00011010200000','00011000000000','西城区','C');             this.regions[this.regions.length] = new Region('00011010300000','00011000000000','崇文区','C'); }

2、  如何结合dtree的事件操作

dtree的原理是：用户初始化dtree对象的aNodes数组，数组中存放的是Node对象，然后调用dtree的tostring()方法生成树状html语法，主要是div和图片链接。

dtree有一个s的方法，就是高亮显示选中节点的方法，加入如下语法：

// Highlights the selected node dTree.prototype.s = function(id) {        if (!this.config.useSelection) return;        var cn = this.aNodes[id];               //--在该处添加以下语句，目的是在用户点击   //--node时向opener添加该node相关信息   this.allName = cn.name;   this.allId = cn.id;   this.parentNodePath(cn.pid);     //执行用户语法   eval(window.dialogArguments.imaginaryOperate);          if(cn.level == 'C' || cn.level == 'c'){               self.close();        }               //=============================================        //1、将dtree的节点对象保存到数组对象        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的节点对象        d.aNodes = [];               //3、获得点击节点的子节点        sRegions = country.getSonRegionsByPid(cn.id);               //4、将子节点加入到regions中，注意已有就不应再加入        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、重新构造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、打开被点击的点        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"> <!-- //用以存放初始节点id和operate的虚变量，也作为window的变量 var imaginaryId; var imaginaryOperate;   /* showTreeDialog            功能：打开国家树窗口                           参数：aId       父节点id                                  aOperate  节点返回数据的操作                             //---详细例程---//                             //opener.countPerYearConditionForm.regDepartment.value=cn.id                             //“=”之前指父窗口对象                             //“=”之后指可返回的值：cn.id        对应id                             //                     cn.pid       对应father_id                             //                     cn.name      对应name                                                        //增加两个参数：最终子节点到根节点的路由的name和id串                             //串接规则：小单位在前大单位在后，之间用"##"隔开                             //                    this.allName                             //                    this.allId                             //可以将多个操作写入，之间以分号“；”隔开，例如：                             //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>

注意：其中多定义了两个用以存放初始节点id和operate的虚变量，传递参数是将window传过去，这样就实现了主父窗口交互。

附件：国家树源码