有人知道如何按需加载ExtJS TreeGrid中的数据吗?

50pmv0ei  于 2022-09-26  发布在  其他
关注(0)|答案(4)|浏览(131)

我在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'
        }]        
    });
});
pxq42qpu

pxq42qpu1#

你所说的按需加载是什么意思?我可以看到您使用的是异步节点,因此只要节点扩展,就会自动按需加载。

dgenwo3n

dgenwo3n2#

我看到你正在使用Ext.tree。AsynctreeNode和Ext.tree。TreeLoader,但TreeGrid也有针对TreeGridLoader和TreeGridsNodeUI等的ux类。
使用Firebug的Net选项卡查看此示例,您将看到使用TreeGrid http://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html的所有相关文件

wribegjk

wribegjk3#

Sencha的示例运行良好,可以根据需要加载数据。问题是它是否需要加载新数据。
因此在该示例中,它不需要这样做,因为无论您向dataUrl传递什么参数,它都将始终返回加载的完整树。
但是,如果树中有一个节点没有子节点,并且您没有明确表示它是一个叶,那么当您展开该节点时,它将对dataUrl with the node id parameter进行新的调用。
在所有父节点的初始加载和每次新节点扩展时,您都有责任从后端返回正确的数据。
您可以检查它是否可以简单地从任何节点中删除所有子节点,您将看到当该节点被扩展时,它将对新节点执行Ajax请求(我认为默认方法是POST)。
设置请求方法和baseParams的简单示例,将与节点id一起传递到请求中:

var tree = new Ext.ux.tree.TreeGrid({
    renderTo: "outputDiv",

    loader: new Ext.ux.tree.TreeGridLoader({
        dataUrl: "general-data",
        requestMethod: "GET",
        baseParams: {
            fromDate: "2010-01-01",
            toDate: "2010-01-01",
            dateField: "systemDate"
        }
    }),

    columns:[{
        header: "Customer",
        dataIndex: "customer"
    },{
        header: "Order",
        dataIndex: "orderNumber"
    },{
        header: "Order Line",
        dataIndex: "orderLine"
    },{
        header: "Item",
        dataIndex: "itemNumber"
    }]
});

还可以将节点属性添加为如下参数:

tree.getLoader.on("beforeload", function(treeLoader, node) {
    this.baseParams.customer = node.attributes.customer;
}, this);
vc6uscn9

vc6uscn94#

如果有人通过谷歌(像我一样)遇到这种情况,解决方法是执行以下操作:
如果数据具有子字段,则不会异步加载子字段。
如果需要异步加载,则需要从数据中删除“children”字段。
ie:当您单击文件夹时,它将异步加载

[{
    "ShopTree": {
        "id": "ShopCategory1",
        "name": "Large Items"
    },
    "leaf": false
}, {
    "ShopTree": {
        "id": "ShopCategory5",
        "name": "Accessories"
    },
    "leaf": false
}]

而这不会异步加载:

[{
    "ShopTree": {
        "id": "ShopCategory1",
        "name": "Large Items"
    },
    "children": [],
    "leaf": false
}, {
    "ShopTree": {
        "id": "ShopCategory5",
        "name": "Accessories"
    },
    "children": [],
    "leaf": false
}]

相关问题