简体   繁体   English

当选择父级时,SAPUI5 TreeTable选择子级

[英]SAPUI5 TreeTable select children when parent is selected

I have a SAPUI5 TreeTable used for filtering on category. 我有一个SAPUI5 TreeTable用于分类筛选。 What I want is that when a parent category is selected, all the children should be selected and when the parent is deselected it's children should be deselected, no matter if they are collapsed or not. 我想要的是,当选择父类别时,应该选择所有子项,而当取消选择父项时,无论是否折叠,都应该取消选择其子项。 The problem is that I cannot use indices because apparently they differ based on collapsed items. 问题是我不能使用索引,因为显然索引根据折叠的项目而有所不同。

            <t:TreeTable
                id="treeCategoriesFilterItem"
                    rows="{path:'tree_categories>/', parameters: {arrayNames:['categories']}}"
                    selectionMode="MultiTogle"
                    enableSelectAll="false"
                    ariaLabelledBy="title"
                    visibleRowCountMode="Fixed"
                    rowSelectionChange="onCategoriesRowSelectionChange"
                    >
                <t:columns>
                    <t:Column width="100%">
                        <Label text="{i18n>label.ticket.category}"/>
                        <t:template>
                            <Text text="{tree_categories>name}"/>
                        </t:template>
                    </t:Column>
                </t:columns>
            </t:TreeTable>

You can achieve it by 您可以通过实现

1.Once the tree table data is received oEvent.getSource().oKeys will have the parent and child information, save this in Table custom data. 1.一旦接收到树表数据, oEvent.getSource().oKeys将具有父项和子项信息,将其保存在表自定义数据中。 This data help to get the childs of the selected parent. 此数据有助于获取所选父母的孩子。

var oRowsBinding = oTable.getBinding("rows");
oRowsBinding.attachDataReceived(function(oEvent){
   var oKeys = oEvent.getSource().oKeys;//will have the parent and child information.
    oTable.data("keys", oKeys);//store the key values
}.bind(this)); 

2. When the parent is selected get the binding path of the parent and loop all the childs binding path and update the corresponding property which select the child items using model setProperty() . 2.选择父对象后,获取父对象的绑定路径并循环所有子对象的绑定路径,并更新相应的属性,该属性使用模型setProperty()选择子项。 Same goes to deselect it. 同样可以取消选择它。

onSelection: function(oEvent){
    var oSource = oEvent.getSource(); 
    bPCBEnabled = oSource.getSelected(),
    oRow =  oSource.getParent(),
    oTable = oRow.getParent(),
    iHierarchyLevel = oRow.getBindingContext("oModel").getObject().HierarchyLevel; 
    if(iHierarchyLevel === 1 && oTable && oTable.data() && oRow){
        if(bPCBEnabled)//expand/collapse parent
            oTable.expand(oRow.getIndex());
        else
            oTable.collapse(oRow.getIndex());

        var oKeys = oTable.data().keys,
        sPath = oRow.getBindingContext("oModel").sPath,//parent binding path
        oChilds = oKeys[sPath.replace("/", "")];
        for(var iKey in oChilds){
            sChildPath = "/" +oChilds[iKey],//child binding path
            oModel = oTable.getModel("oModel"),
            oModel.setProperty(sChildPath + "/Enabled", bPCBEnabled);//change to your corresponding model property which tells is selected/deselected 
        }
    }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM