我在ExtJS库中找到了一个好的TreeGrid控件。但有一件事,我有一棵很大的树,我需要按需加载。
有人知道如何按需加载ExtJS TreeGrid中的数据吗?
我的代码在这里:
Ext.onReady(function () {
Ext.QuickTips.init();
var tree = new Ext.ux.tree.TreeGrid({
title: 'Encyclopedia',
width: 400,
height: 500,
animate: true,
autoScroll: true,
renderTo: "EncyclopediaTree",
containerScroll: false,
border: false,
enableDD: false,
root : new Ext.tree.AsyncTreeNode({text: 'Root'}),
loader: new Ext.tree.TreeLoader({ dataUrl: '/AdminEx/GetEncyclopediaTree' }),
columns: [{
header: 'Item',
dataIndex: 'item',
width: 230
}, {
header: 'Type',
width: 150,
dataIndex: 'type'
}]
});
});
4条答案
按热度按时间pxq42qpu1#
你所说的按需加载是什么意思?我可以看到您使用的是异步节点,因此只要节点扩展,就会自动按需加载。
dgenwo3n2#
我看到你正在使用Ext.tree。AsynctreeNode和Ext.tree。TreeLoader,但TreeGrid也有针对TreeGridLoader和TreeGridsNodeUI等的ux类。
使用Firebug的Net选项卡查看此示例,您将看到使用TreeGrid http://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html的所有相关文件
wribegjk3#
Sencha的示例运行良好,可以根据需要加载数据。问题是它是否需要加载新数据。
因此在该示例中,它不需要这样做,因为无论您向dataUrl传递什么参数,它都将始终返回加载的完整树。
但是,如果树中有一个节点没有子节点,并且您没有明确表示它是一个叶,那么当您展开该节点时,它将对dataUrl with the node id parameter进行新的调用。
在所有父节点的初始加载和每次新节点扩展时,您都有责任从后端返回正确的数据。
您可以检查它是否可以简单地从任何节点中删除所有子节点,您将看到当该节点被扩展时,它将对新节点执行Ajax请求(我认为默认方法是POST)。
设置请求方法和baseParams的简单示例,将与节点id一起传递到请求中:
还可以将节点属性添加为如下参数:
vc6uscn94#
如果有人通过谷歌(像我一样)遇到这种情况,解决方法是执行以下操作:
如果数据具有子字段,则不会异步加载子字段。
如果需要异步加载,则需要从数据中删除“children”字段。
ie:当您单击文件夹时,它将异步加载
而这不会异步加载: