SAPUI5 TreeTable - 节点扩展行为

Question

问题是：

当我在运行时添加行时，我正在尝试扩展TreeTable中的节点。树形图的默认行为是，当它发生某些事情时，它会再次渲染，所有节点都会折叠。

API仅提供保持第一级扩展的方法，但我也希望扩展较低级别的节点。我怎样才能做到这一点？

在添加行之前：

添加一行后：

期望：

[编辑]

我已经尝试使用expand（iRowIndex）来获得正确的行为，但在我的情况下，TreeTable的生命周期（添加内容，重新渲染）没有帮助。

我在做什么：

我正在尝试使用拖放功能添加数据。很快，当我们尝试将内容添加到TreeTable中的特定位置时，我们必须获得父元素和子元素的正确位置。不幸的是，在添加所述内容之后隐藏了第二个+级别，并且使用我的Drag＆amp; Drop混乱了，因为当它们折叠时，表行具有不同的ID。

基本上我需要一个TreeTable函数，例如。“setExpandFirstLevel（true）”，用于所有其他级别。

Answer 1

它有点脏，但您可以在迭代每个行项时调用它来使用TreeTable的{​​{1}}方法

编辑：我创建了一个工作示例（见下文），显示您不需要使用rowID或向DOM添加任何控件。拖放操作应该做的唯一事情是使用仅模型将子节点添加到选定节点。
但实际上，expand(iRowIndex)完全正常，所有可见行都会立即展开（但请参见下面的NB2）

NB1：为简单起见，我没有创建一个完整的拖放示例，而是单击“添加子节点”＆＃39;按钮应该模仿＆＃39; drop＆＃39;事件

NB2：显然expand(rowIndex)方法存在错误：它只展开可见树项。滚动后的任何项目都不会展开......

＆＃13;

＆＃13;

expand

＆＃13;

sap.ui.controller("view1.initial", {
    onInit : function(oEvent) {
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData({
            data : [
                { 
                    name  : "node1", 
                    description : "Lorem ipsum dolor sit amet",
                    data : [
                        { 
                            name : "node1.1", 
                            description : "Cras pretium nisl ac ex congue posuere"
                        },
                        { 
                            name : "node1.2", 
                            description : "Consectetur adipiscing elit",
                            data: [
                                { 
                                    name : "node1.2.1",
                                    description : "Maecenas accumsan ipsum diam"
                                }
                           ]
                        },
                        { 
                            name : "node1.3", 
                            description : "Sed tristique diam non imperdiet commodo"
                        },
                        { 
                            name : "node1.4", 
                            description : "Consectetur adipiscing elit",
                            data: [
                                { 
                                    name : "node1.4.1",
                                    description : "Maecenas accumsan ipsum diam",
                                    data: [
                                        { 
                                            name : "node1.4.1.1",
                                            description : "Maecenas accumsan ipsum diam",
                                            data: [
                                                { 
                                                    name : "node1.4.1.1.1",
                                                    description : "Maecenas accumsan ipsum diam",
                                                    data: [
                                                        { 
                                                            name : "node1.4.1.1.1.1",
                                                            description : "Maecenas accumsan ipsum diam"
                                                        }
                                                   ]
                                                }
                                           ]
                                        }
                                   ]
                                }
                           ]
                        },
                        { 
                            name : "node1.5", 
                            description : "Sed tristique diam non imperdiet commodo"
                        },
                        { 
                            name : "node1.6", 
                            description : "Consectetur adipiscing elit",
                            data: [
                                { 
                                    name : "node1.6.1",
                                    description : "Maecenas accumsan ipsum diam"
                                }
                           ]
                        },
                        { 
                            name : "node1.7", 
                            description : "Sed tristique diam non imperdiet commodo"
                        },

                    ]
                },
            ]
        });
        this.getView().setModel(oModel);
    },

    onAfterRendering : function() {
        this._doExpandAll();
    },

    addNode : function(oEvent) {
        var oContext = oEvent.getSource().getBindingContext();
        var obj      = oContext.getObject();

        var oNew = { name : "New node", description : "New description"};

        if (!obj.data) obj.data = []; //if no child array, create empty one

        obj.data.push(oNew);

        this.getView().getModel().setProperty(oContext.getPath(), obj);

        this._doExpandAll();
    },

    _doExpandAll : function() {
        var oTTbl = this.getView().byId("tbl");
        for (var i=0; i<oTTbl.getRows().length; i++) {
            oTTbl.expand(i);
        }
    }
});
  
var app = new sap.m.App({});

var oView = sap.ui.xmlview({
    viewContent: jQuery("#view1").html()
});

app.addPage(oView);
app.placeAt("uiArea");

＆＃13;

＆＃13;

＆＃13;