需要实现一个多级的中国城市选择树,在以下工程的基础上改进实现了一个:
http://ext-ux-form-combotree.googlecode.com/svn-history/r9/trunk/0.2/Ext.ux.TreeCombo.js
该控件存在两个问题,会导致在同一页面同时存在多个tree控件会产生混乱:
1.
id:Ext.id(),
所有控件共用一个id?
挪到initComponent方法中建立就可以了。
2.root节点是传入的,如果外部调用者复用一个root,同样会导致问题。
可以改进为在initComponent中增加一个自适应检查:
if(!this.root) this.root = new Ext.tree.AsyncTreeNode({ });
控件修改好之后,数据从哪里拿呢?
以下链接给出了中国城市街道列表的json格式,
http://www.1netmedia.cn/base/blogview.asp?logID=1214
感谢同行的工作,赞一个!
但该格式并不符合Ext.tree对数据格式的要求,要求如下形式:
[{ "text": "北京市", "checked": false, "leaf": false, "children": [{ "text": "东城区", "checked": false, "leaf": true }, { "text": "西城区", "checked": false, "leaf": true }
好吧,写一个简单的函数转换形式,打印到浏览器控制台好了。
函数允许设置转换深度level,字符串化利用了浏览器的native JSON API (ECMAScript 3.1定义)
var level_limit = 2; function tree(city,level){ var obj = {text:city.t,checked:false,leaf:true}; if(city.s){ if(level<level_limit){ obj.leaf=false; obj.children=treecitys(city.s,level+1); } } return obj; } function treecitys(citys,level){ var obj=[]; for(var i=0; i<citys.length; i++){ obj[obj.length]=tree(citys[i],level); } return obj; } var tcs = treecitys(areaJson,1); var str_tcs = JSON.stringify(tcs); console.log(str_tcs);