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

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

iteye_4927

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

阅读量550

点赞数

分类专栏： EXT 文章标签： javascript java ViewUI

本文链接：https://blog.csdn.net/iteye_4927/article/details/82541527

版权

EXT 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

开发者博客：www.developsearch.com

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:'根节点', 
                   expanded : true,//根节点是否展开 
                    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 //,隐藏根节点 
                     //useArrows:true 
             }); 
   }); 
</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

开发者博客：www.developsearch.com

iteye_4927

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
EXT--Ext.data.TreeStore 分级异步加载树节点示例

开发者博客：www.developsearch.com Ext.data.TreeStore远程加载树节点有两种常用方式，分别是：分级加载和整体加载。对于结构复杂数据量大的树结构使用分级加载可以极大提高程序响应速度并提升用户体验。客户端：&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8...
复制链接

扫一扫

专栏目录