Ext.data.TreeStore 分級非同步載入樹節點示例
阿新 • • 發佈：2019-01-01
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="styles.css">
-->
<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
對於結構複雜資料量大的樹結構使用分級載入可以極大提高程式響應速度並提升使用者體驗。
客戶端：
<%@ 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="styles.css">
-->
<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