使用includeItemInSelection在List中使用CustomListItem和StandardListItem时列出选择问题

时间:2017-03-31 10:10:14

标签: sapui5

我有以下视图,其中包含列表,并且我已将 includeItemInSelection 属性设置为 true 。我还附加了 selectionChange 事件。

<mvc:View 
    controllerName="com.naveen.test.list.controller.List"
    xmlns="sap.m" 
    xmlns:mvc="sap.ui.core.mvc"
    height="100%">
    <List 
        selectionChange="onSelectionChange" 
        includeItemInSelection = "true"
        mode = "MultiSelect"
        items="{
            path: '/data',
            factory: '.listItemFactory'
        }">
    </List>
</mvc:View>

主要是列表项将通过工厂方法 listItemFactory 实例化,如下所示在控制器中。

    listItemFactory : function(sId, oContext) {
        var each = oContext.getObject();
        var listItem = null;
        if( each.type === 'Group' ) {
            var childList = new List({
                includeItemInSelection : true,
                selectionChange : jQuery.proxy(this.onSelectionChange,this),
                mode : "MultiSelect"
            });
            childList.bindItems({
                path : 'childData',
                factory : jQuery.proxy(this._childListFactory, this)
            });
            listItem = new CustomListItem({
                selected : '{selected}',
                content : [childList]
            });
        } else {
            listItem = this._childListFactory(sId, oContext);
        }
        return listItem;
    },
    _childListFactory : function(sId, oContext){
        return new StandardListItem({
            title : '{name}',
            selected : '{selected}'
        });
    },
    onSelectionChange : function(oEvent) {
        console.log(oEvent);
    }

以下是json数据。

{  
   "data":[  
    {
        "id" : "1",
        "name" : "Name1",
        "selected" : true,
        "type" : "Normal",
        "childData" : []
    },
    {
        "id" : "2",
        "name" : "Name2",
        "selected" : false,
        "type" : "Normal",
        "childData" : []
    },
    {  
        "id":"LAYER15",
        "name":"Name3",
        "selected":true,
        "type":"Group",
        "childData" : [  
            {
                "id":"3-1",
                "name":"Name3-1",
                "selected":true
            },
            {  
                "id":"3-2",
                "name":"Name3-2",
                "selected": false
            },
            {
                "id":"3-3",
                "name":"Name3-3",
                "selected":true
            }
        ]
    }
    ]
}

但是当我们点击子列表项时,它也将触发该子列表项的事件以及父列表项。如何停止该项目的父事件。< / p>

仅供参考,点击标题为名称3-2。的项目 看到控制台会有两个日志。

1 个答案:

答案 0 :(得分:1)

尝试使用jQuery的 preventDefault()函数。 https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault