Extjs4中关于TreeStore加载数据

最新推荐文章于 2020-12-24 22:11:54 发布

灵影

最新推荐文章于 2020-12-24 22:11:54 发布

阅读量1.7w

点赞数

分类专栏： extjs4 文章标签： extjs ajax json 算法 function url

本文链接：https://blog.youkuaiyun.com/atgwwx/article/details/7733179

版权

extjs4 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了Extjs4中TreeStore的数据加载方法，包括异步加载和全量加载。异步加载能提升页面初始化速度，提供良好用户体验。而全量加载时，文章提到了如何处理后台返回的JSON数据，并利用搜索和递归算法构建树形结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Extjs4中对使用的TreeStore时，常常摆在眼前的问题是如何加载数据，从加载的方式上来说，可以分为两类：异步加载和全部加载。

异步加载

异步加载的好处主要是，需要数据的时候才从后台请求，每次加载的数据量少，加快了页面初始化速度，用户体验较好，异步加载的方式可以按照如下方式定义：

1.定义Store

Ext.define('AM.store.monitor.LeftTreeStore', {
    extend: 'Ext.data.TreeStore',
    alias:'widget.lefttreestore',
    fields:['id','name'],
    nodeParam : 'parentId',  //这个属性是异步加载主要特征，通过该节点去请求子节点
    proxy : {
		type : 'ajax',
		url : 'data/MyJsp.jsp',
		reader : {
			type:'json',
			root:'treeList'
		}
	}
	// 设置根节点
	root : {
		text : '根节点',
		id : '-1',
		expanded : true
	}
});

异步加载时，按照如上形式定义好treeStore对象。

全部加载

1.定义store

var store = Ext.create('Ext.data.TreeStore',{
	proxy:{
		type:'ajax',
		url:'data/Myjsp.jsp',
		reader:{
			type:'json',
			root:'treeList'
		}
	},
	root:{
		text:'根节点',
		expanded:true
	}
});

后台返回的数据格式为：

{treeList:[{text:'总公司1',id:'123',children:[{
  				text:'部门1',id:'234',leaf:true
  				}]},
  				{text:'总公司2',id:'258'}
  				]}

上面这种形式是后台将树形构建好，然后返回到页面直接使用。

有时我们可以使用后台返回的｛id:"456",pid:"0"｝列表，在前台创建树，这时主要利用的两个算法：树的搜索，递归添加子节点

var treeList  = [{text:"公司1"，id:"123",pid:"0"},......]  //服务器返回的列表
var treeStore = Ext.create('Ext.data.TreeStore');
//递归添加子节点
function insertChildren(parentId){
var childList = [ ];
//根据parentId父节点，查找出子节点
for(var index in treeList){
var treeNode = treeList[index];
if (treeNode.pid == parentId){
	childList.push(treeNode);
}
//如果子列表为空，则递归结束，直接返回
if(childList.length == 0)return;
var treeNodeInterface = treeStore.getNodeById(parentId);  //这里主要使用了Ext中的树的搜索算法，查找相的节点，当然也可以自己实现
treeNodeInterface.appendChild(childList);
//遍历孩子节点列表，给每个孩子节点继续添加子节点
for(var index in childList){
var treeNode = childList[index];
insertChildren(treeNode.id); //递归调用，插入子节点
}
}
}