0

我在 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

4 回答 4

0

万一有人通过谷歌遇到这个问题（就像我一样），解决这个问题的方法是执行以下操作：

如果您的数据有子字段，那么它不会异步加载子字段。

如果要异步加载，则需要从数据中删除“children”字段。

即：当您单击文件夹时，这将异步加载

[{
    "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
}]
于 2014-01-20T01:22:09.333 回答
0

我看到你正在使用 Ext.tree.AsynctreeNode 和 Ext.tree.TreeLoader 但 TreeGrid 也有用于 TreeGridLoader 和 TreeGridNodeUI 等的 ux 类。

使用 Firebug 的 Net 选项卡查看此示例，您将看到使用 TreeGrid 的所有相关文件http://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html

于 2010-08-31T19:42:51.430 回答
0

Sencha 的示例工作正常，可以根据需要按需加载数据。问题是它是否需要加载新数据。
因此，在该示例中，它不需要，因为无论您将什么参数传递给 dataUrl，它都将始终返回加载的完整树。
但是，如果树中有一个没有子节点的节点并且您没有明确说它是叶子，那么当您展开该节点时，它将使用节点 id 参数对 dataUrl进行新的调用。
您有责任从后端返回正确的数据，无论是在所有父节点的初始加载中，还是在每次扩展新节点时。
您可以检查它是否正在工作，只需从任何节点中删除所有子节点，您会看到当该节点展开时，它将为新节点执行 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);
于 2010-09-17T11:10:51.677 回答
0

按需加载是什么意思？我可以看到您正在使用异步节点，因此每当扩展节点时都会自动按需加载。

于 2010-08-31T17:53:34.527 回答