首先我们可以先定义一个tree如下:
var tree = new Ext.tree.ColumnTree({
region:'center',
border : false,
lines : false,
id :'aphyciniTree',
width : '100%',
cls : 'columntree_header_bg',
bodyStyle : 'overflow-x:hidden; overflow-y:auto;',
animate : false,
rootVisible : false,
autoScroll : true,
onlyLeafCheckable : false,// 所有结点可选,如果不需要checkbox,该属性去掉
loadMask : true,
loader : new Ext.tree.TreeLoader({
dataUrl : 'StudentStatusJsp/listGraduationQualificationsMajors.action',
uiProviders : {
'col' : Ext.ux.ColumnTreeCheckNodeUI
},
baseParams : {
major : ''
},
listeners : {
load : function (){
expand(tree);
}
}
}),
columns : cm,
root : new Ext.tree.AsyncTreeNode({
text : 'rootnode'
})
});
第二我们通过查询来筛选数据
var condition = Ext.getCmp('graMajor_id').getValue();
var aphyciniTree = Ext.getCmp('aphyciniTree');
var loader = aphyciniTree.getLoader();
loader.on('beforeload', function(loader, node) {
this.baseParams.major = condition; // 通过这个传递参数,这样就可以点一个节点出来它的子节点来实现异步加载
}, loader);
loader.load(aphyciniTree.root);
Ext.getCmp('aphyciniTree').expandAll();
本文介绍如何在ExtJs中根据查询条件重新加载Tree的数据。首先创建了一个ColumnTree,并设置了相关配置如dataUrl、loader等。然后通过监听器在加载前更新baseParams以传递查询条件,实现节点异步加载。最后展示了筛选数据并加载到Tree的操作过程。

1241

被折叠的 条评论
为什么被折叠?



