如何提高Infragistics igTreeGrid的性能

Question

我在我的应用程序中使用"Infragistics igTreeGrid"来显示记录。当我向网格提供较少数量的记录时，一切都可以正常工作，但我的要求是一次显示大约 40,000 条记录。因此，当我向网格提供这些记录时，大约需要2分钟的时间，这是非常高的。那么我应该怎么做才能将性能提高到当前时间的一半。我看过"虚拟化"和"按需加载"，但我没有得到它们到底是什么。当我使用虚拟化时，网格比没有虚拟化需要更多时间，我可以知道按需加载的工作原理，以及当节点之间存在父子关系时，我如何使用按需加载仅向网格提供部分数据。这是我使用的代码，任何人都可以帮助我解决这个问题。

$("#treegrid").igTreeGrid({
            dataSource: totalObjects,
            width: "100%",
            //rowEditDialogHeight: "100px",
            autoGenerateColumns: false,
            enableDeleteRow: false,
            primaryKey: "name",
            foreignKey: "parent",
            editMode: "cell",
            initialExpandDepth: 1,
           /* virtualization : true,
            virtualizationMode : "continuous",
            height : "400px",*/
            columns: [
                {headerText: "Product Hierarchy", key: "name", dataType: "string", readOnly: "true"},
                {
                    headerText: "Associated Materials",
                    key: "associations",
                    width: "120px",
                    dataType: "string",
                    readOnly: "true"
                },
                {headerText: "Level", key: "key", width: "50px", dataType: "string", readOnly: "true"},
                {headerText: "Description", key: "excel_desc", dataType: "string", editable: "true"},
                {
                    headerText: "SAP Description", key: "sap_desc", dataType: "string", readOnly: "true"
                    //editorType: "text",
                    //editorOptions: {textMode: "multiline",maxLength: 100}
                },
                // { headerText: "", key: "source",  dataType: "string", readOnly:"true",hidden: true },

            ],

            childDataKey: "children",
            initialExpandDepth: 0,
            features: [
                {
                    name: "Responsive"
                },
                {
                    name: "Resizing"
                },
                {
                    name: "Paging",
                    pageSize: 8,
                    mode: 'allLevels'
                },
                //filtering & sorting
                {
                    name: "Filtering",
                    type: "local",
                    mode: "simple",
                    filterDialogContainment: "window",
                    columnSettings: [
                        {
                            columnKey: "name",
                            condition: "startsWith"
                        },
                        {
                            columnKey: "associations",
                            condition: "equals"
                        },
                        {
                            columnKey: "key",
                            condition: "equals"
                        },
                        {
                            columnKey: "sap_desc",
                            condition: "equals"
                        },
                    ]
                },
                {
                    name: "Sorting",
                    type: "local"
                },

            ]
        });

Answer 1

如注释中所述，具有外键关系的 35k 行的渲染时间为 ~10 秒。

若要进一步改进它，要么将子对象作为数据源中的子对象提供，而不是使用外键，这会将呈现时间减少到 ~2 秒，要么使用按需加载，这将仅在扩展父对象时为每个父对象加载子对象。

按需加载示例。