`

符合Ext tree的全国城市列表json格式

 
阅读更多

需要实现一个多级的中国城市选择树,在以下工程的基础上改进实现了一个:

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);

 

 

1
0
分享到:
评论

相关推荐

    Ext.tree.TreeLoader附带封装的json类

    `Ext.tree.TreeLoader`是Ext JS库中的一个组件,它负责加载和解析树形结构的数据,而JSON(JavaScript Object Notation)则是一种轻量级的数据交换格式,非常适合于在服务器和客户端之间传输数据。我们将通过实例...

    Ext tree json 动态加载完美实例

    在本文中,我们将深入探讨如何使用Ext JS的Tree Panel与JSON数据进行动态加载,并实现多选和单选功能。Ext JS是一种强大的JavaScript库,用于构建富客户端应用,而Tree Panel则是展示层次结构数据的一种组件。在后台...

    Ext tree json Demo

    Ext Tree JSON Demo是一个基于ExtJS库实现的异步加载树形结构的示例项目。ExtJS是一个强大的JavaScript UI框架,广泛用于构建富客户端应用程序。在本项目中,它被用来展示如何利用JSON数据来动态加载树节点,提高...

    EXT tree 使用 实例 最新

    EXT Tree 是一个强大的JavaScript组件,它是EXT JS框架的一部分,用于构建可交互的树形数据结构。EXT Tree在网页中常用于展示层次结构的数据,如文件系统、组织结构或导航菜单等。EXT Tree提供了丰富的功能,包括...

    ext tree json 例子(不含EXT包)

    "ext tree json 例子(不含EXT包)"这个标题暗示我们将讨论如何在不直接引用EXT完整包的情况下,仅使用EXT JS中关于TreePanel和JSON解析的部分来构建一个动态的树形结构。这可能涉及到手动引入EXT的核心组件,如...

    ext TREE

    【压缩包子文件的文件名称列表】"ext Tree"可能包含了EXT JS库的源文件,特别是与Tree组件相关的JS文件和CSS文件。这些文件通常包括了Tree组件的核心逻辑、样式定义、示例代码和可能的配置选项。开发者可以查看这些...

    oa.rar_ext_ext java oa_ext oa_ext tree_java ext tree

    3. 实现EXT与SSH2的交互:编写Servlet或Controller来处理EXT的AJAX请求,返回JSON格式的数据,供EXT Tree使用。 4. 数据加载和异步更新:使用EXT的Ajax请求和SSH2的后台接口进行数据交互,实现实时加载和更新树节点...

    Ext Tree示例

    Ext Tree 支持多种数据源,包括 JSON、XML 和 JavaScript 对象。 `tree2.html`、`tres.html`、`s1.html`、`tree.html` 这些 HTML 文件可能包含了不同的示例代码,用于展示 Ext Tree 的不同用法和配置。例如,它们...

    AnyFo - Util - Json4Ext:通用ExtJS数据交换处理

    Json4Ext是“AnyFo – Util”项目下的一个子项目,他提供了多个工具包,它让开发者轻松的通过构建一些简单的Java类,然后自动的将 这些Java类生成符合Ext要求的各种Json格式的字符串。 Json4Ext类简介 在Json4...

    EXT Tree的简单实践

    3. **数据模型**:EXT Tree 使用 JSON 数据格式来表示树形结构。每个节点是一个对象,包含 id、text、children 等属性。children 属性是一个数组,表示该节点的子节点。在实际应用中,数据通常通过 AJAX 请求从...

    extTree例子点击出现等

    ExtTree是Ext JS库中的一个组件,用于创建和展示树形结构的数据。它在Web应用程序中广泛使用,特别是在需要组织和导航层次结构信息时。在本案例中,“extTree例子点击出现界面”指的是用户在浏览ExtTree时,通过点击...

    读Ext之十(解析JSON)

    它可以配置为从JSON数据源加载数据,使用`proxy`配置项来指定数据源类型,如`Ext.data.proxy.JsonP`或`Ext.data.proxy.Ajax`,这两者都支持JSON格式。 2. **Ext.data.reader.Json**:当Store与JSON数据源交互时,会...

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    例如,Ext.tree.Panel可能会通过Ajax请求从服务器获取JSON格式的树结构数据,然后动态渲染出树形视图。 Ext.tree.Panel是ExtJS中的一个组件,用于展示树状数据结构。它可以显示多级嵌套的节点,支持拖放操作,节点...

    Ext4+JSON+Servlet+Tree构建Web应用框架

    这个框架的核心组件包括Ext4 JavaScript库、JSON数据交换格式、Servlet或Struts2作为后端控制器以及Ext JS中的两种UI组件:Tree Panel和Tab Panel。以下将详细介绍这些技术及其在Web应用中的作用。 1. Ext4:Ext JS...

    Extjs Tree + JSON + Struts2 例子

    通过这种方式,我们解决了 Struts2 JSON 插件返回数据格式与 ExtJS Tree 期待格式不匹配的问题。现在,树形菜单应该能够正确地动态加载并显示从服务器获取的数据。这个例子展示了如何在实际开发中灵活应对数据格式...

    ext树 无限级 json 数据格式 动态加载

    在EXT树中,JSON数据通常用于传递树的节点信息,包括节点ID、文本、子节点列表等。一个简单的JSON数据格式可能如下: ```json { "text": "父节点", "children": [ { "text": "子节点1", "children": [ // 更...

    EXT tree学习 参考

    5. **多种数据源**:EXT Tree可以绑定到JSON、XML、Array等多种数据源,适应不同的后端接口。 在EXT JS中,创建一个TreePanel通常需要以下步骤: 1. **定义模型(Model)**:首先,需要定义树节点的数据模型,声明...

    自己写的一个动态从后台数据库加载Ext.tree的json数据工具类

    这个工具类的核心功能是获取JSON格式的数据,并将其动态加载到Ext.tree中。 首先,我们需要了解Ext.tree的基本概念。Ext.tree是ExtJS库中的一个组件,它提供了一个可交互的树形视图,允许用户展开、折叠节点以及...

    EXT TREE 扩展CHECKBOX JS

    EXT TREE扩展CHECKBOX JS是一种在EXT JS框架下对树形组件(Tree Panel)进行增强,实现复选框功能的技术。EXT JS是一个强大的JavaScript GUI库,它提供了丰富的组件和功能,用于构建复杂的Web应用程序。在EXT JS中,...

Global site tag (gtag.js) - Google Analytics