`
wjt276
  • 浏览: 650381 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

ExtJs加载JSON格式树

阅读更多
html文件中加入
<script src="treedata.js"></script>
/**
		 * 动态加载JSON格式的数据
		 */	
		var mytree_2=new Ext.tree.TreePanel({
			//el:"container",//应用到的html元素id
			animate:true,//以动画形式伸展,收缩子节点
			//title:"Extjs静态树",
			//collapsible:true,
			rootVisible:true,//是否显示根节点
			autoScroll:true,
			autoHeight:true,
			//height:'100%',
			width:'100%',
			lines:true,//节点之间连接的横竖线

			//树加载器(TreeLoader)的目的是从URL延迟加载树节点Ext.tree.TreeNode的子节点。返回值必须是以树格式的javascript数组
			loader: new Ext.tree.TreeLoader({
				preloadChildren: true,//若为true,则loader在节点第一次访问时加载"children"的属性
				clearOnLoad: false//(可选)默认为true。在读取数据前移除已存在的节点
			}),
			root: new Ext.tree.AsyncTreeNode({
			text:'ExtJs',
			id:'root',
			expanded:true,
			children:[Docs.classData]
			}),
			collapseFirst:false  
		});

 treedata.js内容

var Docs = {};
Docs.classData={
	"id":"root",
	"iconCls":"icon-docs",
	"text":"根节点",
	"singleClickExpand":true,
	"expanded":true,
	"leaf":false,
	"children":[{
		"id":"id1",
		"iconCls":"icon-pkg",
		"text":"子节点一",
		"qtip":"asdk",//需要使用 Ext.QuickTips.init();//开启提示功能 
		"singleClickExpand":true,
		"expanded":true,
		"leaf":true
	},{
		"id":"child2",
		"iconCls":"icon-pkg",
		"text":"子节点二",
		"singleClickExpand":true,//单击节点是否展开
		"expanded":true,
		"leaf":false,
		"children":[{
			"id":"child21",
			"iconCls":"icon-pkg",
			"text":"子节点三",
			"singleClickExpand":true,//单击节点是否展开
			"expanded":true,
			"leaf":true
		}]
	}]
};

 

分享到:
评论

相关推荐

    Extjs Json树封装

    总的来说,"Extjs Json树封装"涉及的核心知识点有:JSON数据格式、ExtJS树形组件、树加载器(`JsonTreeLoader`)、可能的自定义插件(`JsonPluginTreeLoader`)以及如何在实际应用中配置和使用它们。理解并熟练运用...

    Extjs 动态加载树

    标题“Extjs 动态加载树”涉及到的是一个前端开发技术话题,主要集中在使用Extjs框架构建能够动态加载数据的树形结构。Extjs是一个基于JavaScript的组件化UI库,常用于开发富客户端应用。动态加载树(Dynamic ...

    SSH+extjs+json动态树的构造(附详细步骤及源码)

    通过以上步骤,我们可以构建一个动态的、基于SSH和ExtJS的树形结构,其中JSON数据作为数据交换格式,使得前后端能有效通信。这种方法不仅方便了数据的传递,还简化了页面与服务器之间的交互,提高了用户体验。

    Extjs Tree + JSON + Struts2 例子

    在本文中,我们将探讨如何结合 ExtJS、JSON 和 Struts2 实现一个动态加载的树形菜单。ExtJS 是一个流行的 JavaScript 框架,用于构建富客户端应用,它支持多种数据源,包括 JSON。Struts2 是一个 Java Web 开发框架...

    extjs读取解析后端json格式数据显示条形图

    这个对象能够加载JSON数据,并提供了一种灵活的方式来操作和绑定数据到组件。首先,你需要定义一个Store,包括其配置项如URL(指向后端接口的路径)和模型(Model,定义了数据的结构): ```javascript var store =...

    Extjs 无限树菜单 后台拼接json

    "Extjs 无限树菜单 后台拼接json"这个主题涉及到如何在后端生成无限级别的树形菜单数据,并通过JSON格式传输到前端进行渲染。 首先,我们要理解树形菜单的基本概念。树形菜单是一种以节点和层级关系展示数据的控件...

    Extjs4的FormPanel从后台load json数据的要点

    在本篇文章中,我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据,并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术,尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...

    extjs 跟 struts+json

    标题 "extjs 跟 struts+json" 暗示了本文将探讨如何使用ExtJS框架与Struts框架结合,通过JSON数据格式进行交互。ExtJS是一个强大的JavaScript库,用于构建富客户端Web应用程序,而Struts是Java Web开发中的一个MVC...

    Extjs4树结构异步加载

    在ExtJS4中实现树结构的异步加载,主要涉及以下几个关键概念: 1. **TreeStore**: TreeStore是树结构的数据源,它负责管理与服务器之间的数据通信。对于异步加载,我们需要配置TreeStore,设置`autoLoad`为`false`...

    extjs实现动态树加载菜单

    动态树加载菜单是 ExtJS 中一种常见且实用的功能,它允许用户在需要时按需加载树节点,从而提高应用性能,减少初次加载时的数据量。 动态树加载,也称为懒加载或按需加载,是指在用户滚动、展开节点或执行其他操作...

    extjs实现动态树

    2. 数据源:动态树的数据通常来自服务器,通过Ajax请求获取JSON格式的节点数据。这些数据包括节点ID、文本、子节点等信息。 3. 节点模型:每个树节点都是一个`Ext.data.Model`实例,包含节点属性如id、text、leaf等...

    extjs tree + json+struts2示例源代码

    在页面中,定义一个TreePanel,设置其store属性为一个AjaxStore,用来异步加载JSON数据。AjaxStore会向服务器发送请求,接收返回的JSON数据并自动构建树结构。 6. **配置AjaxStore**:AjaxStore需要配置URL(指向...

    ExtJS构造动态异步加载

    总结,使用ExtJS结合AJAX和JSON数据格式,可以构建出动态异步加载的树形组件。这种方式既节省了网络资源,又保证了用户界面的流畅性。在实际开发中,可以根据项目需求进一步定制树的样式、交互以及数据处理逻辑。

    EXTJS下JSON对象实用源码 包含页面代码及后台JAVA类代码

    压缩文件中包含了两个文件,第一个文件详细说明了在页面上EXTJS如何使用JSON对象进行数据的查询与加载。第二个文件详细说明了在后台JAVA类中,如何对JSON对象进行处理,并返回JSON对象,以供前台页面使用

    ExtJS_Tree利用_JSON_在Struts_2实现Ajax动态加载树结点

    在本文中,我们将深入探讨如何使用ExtJS框架的Tree组件,结合JSON数据格式以及Struts 2框架,来实现Ajax动态加载树形结构的节点。这是一项常见的需求,特别是在构建可扩展、用户友好的Web应用时,动态加载的树结构...

    Extjs4 多选下拉树

    4. **Json Store**: 数据存储在JSON格式中,这是ExtJS常用的存储方式。我们需要创建一个`Ext.data.TreeStore`,并指定它的`root`、`proxy`(通常是`AjaxProxy`)以及`model`,确保数据能正确加载到TreePanel中。 5....

    Extjs 从远程获取json类型的list数据

    标题 "Extjs 从远程获取json类型的list数据" 涉及的是在Web开发中使用Extjs框架与服务器进行交互,获取JSON格式的数据并展示在列表(List)组件中的技术。Extjs是一款强大的JavaScript库,用于构建富客户端的桌面级...

    动态加载树Extjs + asp.net

    本主题主要探讨如何在ExtJS框架下,结合ASP.NET后端技术,实现动态加载树形结构数据。以下是对这个知识点的详细阐述: 首先,ExtJS是一个强大的JavaScript库,用于构建富客户端应用。它提供了丰富的组件库,包括树...

    extjs动态树struts请求数据

    在ExtJS动态树中,Struts需要将后端数据转化为JSON格式,以便前端解析。JSON对象通常包含键值对,数组和嵌套的对象,可以方便地表示复杂的数据结构。 3. **Struts2 Action和Result**: 在Struts2框架中,Action类是...

Global site tag (gtag.js) - Google Analytics