Question

我有一个具有MultiSelect模式的Tree元素，每个树项中的复选框都很好看。我想这样做，如果我选择一个项目，它的所有孩子也会被选中。我在视图中有树：

 <Tree selectionChange="onPress" itemPress="onPress" includeItemInSelection="true" mode="MultiSelect" items="{path: '/'}" id="Tree">
    <headerToolbar> 
       <Toolbar> 
          <content> 
             <Title level="H2" text="Title"/> 
             <ToolbarSpacer/> 
          </content> 
       </Toolbar>
    </headerToolbar>
    <StandardTreeItem title="{text}"/>
 </Tree>

我想知道SAPUI5是否有树的属性，例如＆＃34; Check Children＆＃34;或类似的东西。如果没有，我怎么能这样做。

感谢。

Answer 1

有两种方法可以想到：

使用绑定（更好的＆＃39;方式）。
使用JS操作（＆＃39;更难＆＃39;方式 - 因为TreeItem没有检索子项的方法。）

我会告诉你更好的＆＃39;做事的方式。更难的＆＃39;你可以做一个作为这种方法的扩展（如果你真的想这样做，我也可以添加有关如何做的信息）。

基本上，您需要通过添加selected标志来扩展模型。假设您有一个典型的模型结构（如在探索的示例中），您可以使用此函数：

function addSelectedFlag(aNodes, bSelected) {
    jQuery.each(aNodes, function(iIndex, oNode) {
        oNode.selected = bSelected;
        if (oNode.nodes) {
            addSelectedFlag(oNode.nodes, bSelected);
        }
    });
}

然后，当选择发生变化时，您可以执行以下操作：

onSelect: function(oEvent) {
    var aItems = oEvent.getParameter("listItems") || [],
        oModel = this.getView().getModel();
    jQuery.each(aItems, function(iIndex, oItem) {
        var oNode = oItem.getBindingContext().getObject(),
            bSelected = oItem.getSelected();
        if (oNode.nodes) {
            addSelectedFlag(oNode.nodes, bSelected);
        }
    });
    oModel.refresh();
}

为项目指定模板时，还必须绑定选择：

<StandardTreeItem title="{text}" selected="{selected}"/>

我做了一个有效的JsFiddle：https://jsfiddle.net/n4frtzd8/1/

树选择SAPUI5（带复选框）。选中父节点时自动检查子节点

1 个答案: