需要实现一个多级的中国城市选择树,在以下工程的基础上改进实现了一个:
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);
相关推荐
`Ext.tree.TreeLoader`是Ext JS库中的一个组件,它负责加载和解析树形结构的数据,而JSON(JavaScript Object Notation)则是一种轻量级的数据交换格式,非常适合于在服务器和客户端之间传输数据。我们将通过实例...
在本文中,我们将深入探讨如何使用Ext JS的Tree Panel与JSON数据进行动态加载,并实现多选和单选功能。Ext JS是一种强大的JavaScript库,用于构建富客户端应用,而Tree Panel则是展示层次结构数据的一种组件。在后台...
Ext Tree JSON Demo是一个基于ExtJS库实现的异步加载树形结构的示例项目。ExtJS是一个强大的JavaScript UI框架,广泛用于构建富客户端应用程序。在本项目中,它被用来展示如何利用JSON数据来动态加载树节点,提高...
EXT Tree 是一个强大的JavaScript组件,它是EXT JS框架的一部分,用于构建可交互的树形数据结构。EXT Tree在网页中常用于展示层次结构的数据,如文件系统、组织结构或导航菜单等。EXT Tree提供了丰富的功能,包括...
"ext tree json 例子(不含EXT包)"这个标题暗示我们将讨论如何在不直接引用EXT完整包的情况下,仅使用EXT JS中关于TreePanel和JSON解析的部分来构建一个动态的树形结构。这可能涉及到手动引入EXT的核心组件,如...
【压缩包子文件的文件名称列表】"ext Tree"可能包含了EXT JS库的源文件,特别是与Tree组件相关的JS文件和CSS文件。这些文件通常包括了Tree组件的核心逻辑、样式定义、示例代码和可能的配置选项。开发者可以查看这些...
3. 实现EXT与SSH2的交互:编写Servlet或Controller来处理EXT的AJAX请求,返回JSON格式的数据,供EXT Tree使用。 4. 数据加载和异步更新:使用EXT的Ajax请求和SSH2的后台接口进行数据交互,实现实时加载和更新树节点...
Ext Tree 支持多种数据源,包括 JSON、XML 和 JavaScript 对象。 `tree2.html`、`tres.html`、`s1.html`、`tree.html` 这些 HTML 文件可能包含了不同的示例代码,用于展示 Ext Tree 的不同用法和配置。例如,它们...
Json4Ext是“AnyFo – Util”项目下的一个子项目,他提供了多个工具包,它让开发者轻松的通过构建一些简单的Java类,然后自动的将 这些Java类生成符合Ext要求的各种Json格式的字符串。 Json4Ext类简介 在Json4...
3. **数据模型**:EXT Tree 使用 JSON 数据格式来表示树形结构。每个节点是一个对象,包含 id、text、children 等属性。children 属性是一个数组,表示该节点的子节点。在实际应用中,数据通常通过 AJAX 请求从...
ExtTree是Ext JS库中的一个组件,用于创建和展示树形结构的数据。它在Web应用程序中广泛使用,特别是在需要组织和导航层次结构信息时。在本案例中,“extTree例子点击出现界面”指的是用户在浏览ExtTree时,通过点击...
它可以配置为从JSON数据源加载数据,使用`proxy`配置项来指定数据源类型,如`Ext.data.proxy.JsonP`或`Ext.data.proxy.Ajax`,这两者都支持JSON格式。 2. **Ext.data.reader.Json**:当Store与JSON数据源交互时,会...
例如,Ext.tree.Panel可能会通过Ajax请求从服务器获取JSON格式的树结构数据,然后动态渲染出树形视图。 Ext.tree.Panel是ExtJS中的一个组件,用于展示树状数据结构。它可以显示多级嵌套的节点,支持拖放操作,节点...
这个框架的核心组件包括Ext4 JavaScript库、JSON数据交换格式、Servlet或Struts2作为后端控制器以及Ext JS中的两种UI组件:Tree Panel和Tab Panel。以下将详细介绍这些技术及其在Web应用中的作用。 1. Ext4:Ext JS...
通过这种方式,我们解决了 Struts2 JSON 插件返回数据格式与 ExtJS Tree 期待格式不匹配的问题。现在,树形菜单应该能够正确地动态加载并显示从服务器获取的数据。这个例子展示了如何在实际开发中灵活应对数据格式...
在EXT树中,JSON数据通常用于传递树的节点信息,包括节点ID、文本、子节点列表等。一个简单的JSON数据格式可能如下: ```json { "text": "父节点", "children": [ { "text": "子节点1", "children": [ // 更...
5. **多种数据源**:EXT Tree可以绑定到JSON、XML、Array等多种数据源,适应不同的后端接口。 在EXT JS中,创建一个TreePanel通常需要以下步骤: 1. **定义模型(Model)**:首先,需要定义树节点的数据模型,声明...
这个工具类的核心功能是获取JSON格式的数据,并将其动态加载到Ext.tree中。 首先,我们需要了解Ext.tree的基本概念。Ext.tree是ExtJS库中的一个组件,它提供了一个可交互的树形视图,允许用户展开、折叠节点以及...
EXT TREE扩展CHECKBOX JS是一种在EXT JS框架下对树形组件(Tree Panel)进行增强,实现复选框功能的技术。EXT JS是一个强大的JavaScript GUI库,它提供了丰富的组件和功能,用于构建复杂的Web应用程序。在EXT JS中,...