javascript – SAPUI5 TreeTable – 节点扩展行为
作者：互联网
问题是：
当我在运行时添加行时,我正在尝试扩展TreeTable中的节点. TreeTable的默认行为是,当它发生某些事情时,它会再次渲染并且所有节点都被折叠.
API仅提供保持第一级扩展的方法,但我也希望扩展较低级别的节点.我怎样才能做到这一点？
在添加行之前：
添加一行后：
期望：
[编辑]
我已经尝试通过使用expand(iRowIndex)来获得正确的行为,但在我的情况下,TreeTable的生命周期(添加内容,获得重新呈现)是没有用的.
我在做什么：
我正在尝试使用Drag& Drop函数添加数据.很快,当我们尝试将内容添加到TreeTable中的特定位置时,我们必须获得父元素和子元素的正确位置.不幸的是,在添加所述内容之后隐藏了第二级,并且在我的Drag& Drop中出现了混乱,因为表行在折叠时具有不同的ID.
基本上我需要一个TreeTable函数,如所有其他级别的“setExpandFirstLevel(true)”.
解决方法:
它有点脏,但您可以通过在迭代每个行项时调用它来使用TreeTable的expand(iRowIndex)方法
编辑：我已经创建了一个工作示例(见下文),显示您不需要使用rowID或向DOM添加任何控件.拖放操作应该做的唯一事情是仅使用模型将子节点添加到所选节点.
但实际上,扩展(rowIndex)工作得非常好,所有可见行都会立即展开(但请参见下面的NB2)
NB1：为简单起见,我没有创建完整的拖放示例,但单击“添加子节点”按钮应该模仿’drop’事件.
NB2：显然,expand方法中存在一个错误：它只扩展可见树项.滚动后的任何项目都不会展开…
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");<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<script id="view1" type="ui5/xmlview">
<mvc:View
controllerName="view1.initial"
xmlns:t="sap.ui.table"
xmlns="sap.ui.commons"
xmlns:mvc="sap.ui.core.mvc" >
<t:TreeTable id="tbl" rows="{path:'/',parameters:{arrayNames:['data']}}" visibleRowCount="10">
<t:columns>
<t:Column>
<t:label><Label text="name" /></t:label>
<t:template><TextView text="{name}" /></t:template>
</t:Column>
<t:Column>
<t:label><Label text="description" /></t:label>
<t:template><TextView text="{description}" /></t:template>
</t:Column>
<t:Column>
<t:label><Label text="" /></t:label>
<t:template><Button text="Add child node" press="addNode"/></t:template>
</t:Column>
</t:columns>
</t:TreeTable>
</mvc:View>
</script>
<div id="uiArea"></div>标签：javascript,sapui5,treetable 来源： https://codeday.me/bug/20190702/1360515.html