1.tree的异步加载:
前台代码:
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL="/commons/extjs2.1/extjs/resources/images/default/s.gif";
var root= new Ext.tree.AsyncTreeNode( { id:'1', text: '我是树根' } );
var loader= new Ext.tree.TreeLoader( {dataUrl: 'aa.jsp'});
var treePanel;
treePanel= new Ext.tree.TreePanel( {
renderTo: 'tree',
root: root,
loader: loader
} );
loader.on('beforeload',function(loader,node){
this.baseParams.id=node.id; //通过这个传递参数,这样就可以点一个节点出来它的子节点来实现异步加载
},loader);
});
后台代码:aa.jsp
<%
String id= request.getParameter("id");
if(id.equals("1")){
out.println("[{text: '1节点', id: '2'},{text: '2子叶', leaf: true, id: 'node2'}]");
}else if(id.equals("2")){
out.println("[{text: '1_1子叶', leaf: true,id: 'node1_1'}]");
}
%>
2.同步加载树,将所有的树的信息以json语句都返回并加载到 tree上,不用点一个节点去访问以下后台
前台代码:
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL="/commons/extjs2.1/extjs/resources/images/default/s.gif";
var root= new Ext.tree.AsyncTreeNode( { id:'1', text: '我是树根' } );
var loader= new Ext.tree.TreeLoader( {dataUrl: 'bb.jsp'});
var treePanel;
treePanel= new Ext.tree.TreePanel( {
renderTo: 'tree',
root: root,
loader: loader
} );
});
后台代码:bb.jsp
<%
out.println("[{text: '1节点', id: '2',children: [{text: '1_1子叶',id: 'node1_1',children:[{text: '1_1子叶', leaf: true,id: 'node1_12'}]},{text: '1_2子叶', leaf: true,id: 'node1_2'} ] },{text: '2子叶', leaf: true, id: 'node2'}]");
%>
注意:个人感觉用异步加载好,因为这样不浪费资源,需要查看什么节点从后台获取节点数据显示,而同步加载不管需不需要看,都会将所有节点都返回
遇到的问题:当使用同步加载后,例如删除了node这个节点(非root节点)下的某个子节点,想要刷新该节点node并重新展开该节点时,不知道怎么办,
方法1:行不通
使用 loader.load(node, function() {
node.expand(true, true);
})
但是此方法行不通,因为同步树加载时已经将所有的节点都返回并加载到了root上,再使用loader.load并不会再次访问 bb.jsp,如果将loader.load(node)换成loader.load(root)时就可以访问bb.jsp,看方法2,方法3
方法2:行不通
使用
loader.load(root, function(){
node.expand(true, true);//node为想要刷新的节点,因为重新加载root后,如果root不展开,node数据时找不到的
})
当loader.load(root)时,可以再次访问bb.jsp,但是node.expand(true, true)却会报错,因为这个时候root并没有展开,它找不到深藏的node节点
方法3: 可以试试,我自己试了可以行得通
使用
var path= node.getPath();
loader.load(root, function(){
treePanel.expandPath(path); //这样就可以展开node了
})
注意:异步加载不会出现这样的问题,例如想要重新加载node,就可以使用
loader.load(node, function() {
node.expand(true, true);
})
分享到:
相关推荐
extjs4,当点击左边的树,右边会生成相应的面板,代码精简,欢迎大家来学习,有问题可以直接交流。
Ext.ux.tree.treegrid异步加载,点击节点加载数据
NULL 博文链接:https://8366.iteye.com/blog/544437
本人手写的一款js树形控件,附带图片,代码简洁,注释齐全,可读性高,易于维护,方便移植,结构清晰,思路明了,界面美观,同时支持异步加载,对浏览器的兼容行强,你还可以根据自己的需要扩展功能,可大量应用于...
ztree+dwr实现的异步加载树形菜单
Ext 异步加载添加 删除节点 修改combobox选择项,相当好的东西,值得参考!希望对你有用!
extjs tree 异步加载树型完整的一个web工程,自已已经试过,可用。
本软件实现了一个机构管理的小例子,可以点击左边树节点在右边的Grid中显示该节点的下属机构,并提供增删查改功能,主要包括JS文件和生成动态树所需要的JSON格式的数据的JAVA和jsp文件,商业逻辑请自己负责完成
当树的数据并不多时,把数据一次加载进来,给用户的体验会比较好,这里后台生成数据用递归算法生成json串,前台直接用这个json串作为ext树的数据来源
ext树 无限级 json 数据格式 动态加载
看看就知道了,不错的下拉树,异步加载树节点,使用Ext做的 下拉树
Ext树例子
自己扩展的异步分页bbar,对大数据量表的查询很有帮助
Ext树创建说明.rar
ext.net 中树加载及实现方式,初学者可以参考,项目中一段代码片段,仅供参考
目录: 1. layout-test-01.html为上下布局,...详细见代码。 ...详细见代码。 ...即:Ext.window ...6.tree-asynch-test.html为异步加载的树 7.tree-edit-test.html为节点可以编辑的树 8.tree-tz-test.html为tree节点拖拽的练习
Ext4 动态加载js例子 Ext4 动态加载js例子 Ext4 动态加载js例子 Ext4 动态加载js例子
EXT 3.0 + SERVLET 开发的EXT树表分页功能. 包里包括了工程相关的所有东西(包括引用的EXT) 下载后部署就可用.
EXT异步提交FORM表单的使用和,以及EXT配合struts2,sprint2.5进行前台和后台的交互解释和运用.....