- 业务需求:软件开发过程中经常遇到将业务数据在页面上加载为树形方式,以展现为层次型信息。
-
需求分析
-
可通过后台动态构件tree上所展展现的数据,前台声明一个TreePanel对象后,可以将请求后返回的数据加载到对象上;
-
TreePanel可以指定请求的Url,也可以指定异步或同步的加载方式
-
TreePanel可以指定是否显示复选框,以完成复选或单选功能
- 提供获取当前选择的节点的功能
-
程序设计
-
首先,新增斩TreePanel继承自Ext.tree.TreePanel,以保证保留原来的TreePanel的同时,扩展新需求:
justgin.bap.TreePanel = Ext.extend(Ext.tree.TreePanel, {
title: '树',
rootText: '根节点',
rootId: '',
manageAble: true,
autoScroll: true,
url: '/Domain/DynamicTreeAjax.do', //查询数据的地址
urlParams: {},
serviceUrl: '', //外部接口,查询数据的serviceUrl
checkBox: false //指定是否有复选框
});
b.然后,扩展initComponent方法,以实现动态加载数据的功能:
initComponent: function() {
var me = this
this.addEvents(
"beforeloadnode",
"loadnode"
)
//设置根节点
var rootConfig = {
text: me.rootText,
id: me.rootId,
draggable: false,
leaf: false
}
this.root = new Ext.tree.AsyncTreeNode(rootConfig)
if(me.url != '') {
this.loader = new Ext.tree.TreeLoader({
dataUrl: me.url,
params: Ext.apply(me.urlParams, {serviceUrl: me.serviceUrl}),
listeners: {
'beforeload': function(l, n) {
me.fireEvent('beforeloadnode', n, me)
l.baseParams = Ext.apply(me.urlParams, {serviceUrl: me.serviceUrl})
},
'load': function(l, n) {
me.fireEvent('loadnode', n, me)
l.baseParams = Ext.apply(me.urlParams, {serviceUrl: me.serviceUrl})
}
}
});
if(me.checkBox) {
Ext.apply(this.loader, {baseAttrs: {uiProvider : Ext.ux.TreeCheckNodeUI}});
}
}
me.on("render", function(me) {
me.getRootNode().expand(false)
}),
justgin.bap.TreePanel.superclass.initComponent.call(this);
}
c.扩展方法getSelected(),返回单选时,当前选中的节点
getSelected: function() {
var nd = this.getSelectionModel().getSelectedNode();
return nd;
}
d.扩展方法getChecked(),返回有复选框时,选中的节点的集合(TODO)
e.后台返回数据的格式为Ext.tree.Panel可接受的josn格式,如下格式所示,目前许多开源的jsonUtility都提供json格式的封装,后面会专门开篇介绍本人对业务对象与json数据之间转换的设计。
[{
"text": "adapter",
"id": "source\/adapter",
"cls": "folder"
}, {
"text": "dd",
"id": "source\/dd",
"cls": "folder"
}, {
"text": "debug.js",
"id": "source\/debug.js",
"leaf": true,
"cls": "file"
}]
4.使用方法
var tree = new Beidasoft.Bap.TreePanel({
id: 'lefttree',
title: 'SampleTreePanel',
border: false,
serviceUrl: 'ExtObjectData/extTree', //此处请求的是后台Bean中的一个方法,返回能接受的json格式
renderTo: 'divtest'
});
分享到:
相关推荐
可实现选中父节点,自动选中子节点,选中子节点,自动遍历选中父节点
TreePanel的checkbox节点操作及父子节点联动的演示DEMO
ext.net
关于TreePanel的一些文档,有点杂,不过内容比较多
博文链接:https://jfp.iteye.com/blog/178889
TreePanel的checkbox节点操作及父子节点联动的演示DEMO,前面那个有Bug,选中子节点时,没能选择父节点。 这个版本修正了
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
treepanel 和 tabpanel 合在一起使用,可直接使用
通过java 访问数据库而生成节点 子节点的 ID 与 父节点的关系为“父节点id_子节点id”此id为数据库中的id 同理“父节点id_子节点id_子子节点id”,因此加载树...再调用不能的sql 语句 因为每个节点的数据都不在一个表中
而TreePanel的更新也是一个比较常见的问题,当我们点击测试按钮时,TreePanel会请求远程服务器的资源,重新刷新树,从而达到动态更新树的效果,这在实际开发中是非常有用的。 阅读对象:本中心需要使用Ext框架开发的...
通过数据库进行后台对treepanel的增删改查。供初学者参考学习。
NULL 博文链接:https://yjzagan2003.iteye.com/blog/1110742
通过DWR动态加载Ext.tree.TreePanel。
EXT 教材 TreePanel基本使用
基于extjs 3.2,右侧折叠面板,然后面板里面包含了树,点击树节点以后,会把树的href里面的地址加载到右边的tabpanel。代码清晰简单。
当你在asp.net下面 使用Ext TreePanel直接加载服务器上XML文件会出现树不能显示,树据不能正确加载的问题。
var mytree new Ext tree TreePanel { el : "container" animate : true title : "简单Extjs动态树" collapsible : true enableDD : true enableDrag : true rootVisible : true ...