Ext.data.TreeStore 分级异步加载树节点示例

最新推荐文章于 2023-05-12 17:23:55 发布

iteye_9439

最新推荐文章于 2023-05-12 17:23:55 发布

阅读量1.5k

点赞数

分类专栏： ExtJs 文章标签： Ext.data.TreeStore

ExtJs 专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何在ExtJS中实现树形结构的数据分级加载，通过客户端与服务器端的配合，展示了一种提高程序响应速度及用户体验的方法。具体包括数据模型定义、TreeStore配置、异步加载设置等。

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

Ext.data.TreeStore远程加载树节点有两种常用方式，分别是：分级加载和整体加载。
对于结构复杂数据量大的树结构使用分级加载可以极大提高程序响应速度并提升用户体验。

客户端：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'treecolumn.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="ext-all.js" ></script>
<script type="text/javascript" src="locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
//定义数据模型
Ext.regModel("OrgInfo",{
fields:['orgId','name','count']
});
var myStore=new Ext.data.TreeStore({
model:'OrgInfo',
nodeParam:'orgId', //节点参数名
proxy:{
type:'ajax',
url:'treestore/treeServer.jsp',
reader:'json'
},
autoLoad:true,
root:{
name:'根节点',
[color=red] expanded : true,//根节点是否展开[/color]
id:'-1'
}
});
Ext.create('Ext.tree.Panel',{
title:'分级异步加载树节点示例',
renderTo:Ext.getBody(),
width:250,
height:200,
columns:[{
xtype:'treecolumn', //树状表格列
text:'公司名称',
dataIndex:'name',
width:150,
sortable:true
},
{
text:'员工人数',
dataIndex:'count',
flex:1,
sortable:true
}],
store:myStore,
rootVisible:false //,隐藏根节点
[color=red] //useArrows:true [/color]
});
});
</script>
</head>

<body>

</body>
</html>

服务器端：treeServer.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String orgId=request.getParameter("orgId");
String result="";
if("-1".equals(orgId)){
result="[{name:'总公司',count:100,id:100}]";
}else if("100".equals(orgId)){
result="[{name:'分公司一',count:20,id:110},{name:'分公司二',count:80,id:120}]";
}else if("120".equals(orgId)){
result="[{name:'部门一',count:30,id:121,leaf:true},{name:'部门二',count:50,id:122,leaf:true}]";
}
response.getWriter().write(result);
%>

注：所有示例来自《ExtJS Web 应用程序开发指南》第2版
这是第13章，开始没有得到想要的效果。后来问了其他朋友才知道少了
expanded : true,这行代码，没有默认展开根节点。

如果加上 useArrows:true 在树节点中使用箭头，效果如图usearrow.jpg