9

我写了一个 XML 视图。里面有一张桌子:

<Table xmlns="sap.m"
  id="myTable"
  select=""
  selectionChange=""
  swipe=""
  growingStarted=""
  growingFinished=""
  updateStarted=""
  updateFinished=""
  itemPress="console.log('clicked on item')"
>
  <columns>
    <!-- sap.m.Column -->
  </columns>
  <items>
    <!-- sap.m.ListItemBase -->
  </items>
</Table>

我使用控制器的 将行插入到表中onInit,但是当我单击一行时,未显示该消息。

如果我console.log(tablePippo.getProperty("itemPress"));在控制器内部使用,它会抛出

未捕获的错误:元素 sap.m.Table#operationDetail--myTable 中不存在属性“itemPress”

4

5 回答 5

52

这似乎确实是人们在使用sap.m.ListBase相关控件时经常遇到的问题。让我概述一下如何管理事件(尤其是完全激活它们):

混淆可能与sap.m.ListMode继承自的控件和继承自sap.m.ListBasesap.m.ListType项目有关sap.m.ListItemBase

让我们假设以下示例列表:

<List
  selectionChange=".onSelectionChange"
  itemPress=".onItemPress"
  delete=".onDelete"
>
  <items>
    <ObjectListItem
      title="Hello ListItem"
      press=".onObjectListItemPress"
    />
  </items>
</List>

sap.m.ListMode (示例)

如果您使用sap.m.Listor sap.m.Table,事件触发取决于mode您使用的。mode不幸的是,没有属性的列表/表格不会触发任何事件!如果您希望 List / Table 触发这些事件,则必须为其分配一个模式。例如:

<List
  mode="SingleSelect"
  ...
>

这些是sap.m.ListMode文档中的可能模式:

无(默认)

由于没有mode分配任何属性,因此不会触发任何事件!

列表模式 无

单选 | 单选左

列表控件mode="SingleSelect"在每个项目的右侧显示一个onSelectionChange单选按钮,并在用户单击给定单选按钮控件时立即触发事件。使用"SingleSelectLeft"只是将单选按钮移动到项目的左侧。

列表模式 SingleSelectLeft

单选大师

列表控件mode="SingleSelectMaster"将在鼠标悬停时向您显示手,并onSelectionChange在单击项目时触发。

列表模式 SingleSelectMaster

多选

列表控件提供了一个复选框,并在每次选中mode="MultiSelect"取消选中项目时触发onSelectionChange事件。

列表模式多选

删除

使用列表mode="Delete"为您提供了一个不错的删除按钮并触发onDelete

列表模式 删除


sap.m.ListType (示例)

还有一个你应该看看的type属性:你的物品的属性。

每个项目都继承自sap.m.ListItemBase并因此具有一个名为 的属性type。让我们看看它的样子:

<items>
  <ObjectListItem
    type="Active"
    press=".onObjectListItemPress"
    detailPress=".onDetailPress"
    ...
  />
</items>

sap.m.ListMode文档中列出了这些类型:

积极的

根据mode,itemPress列表 press列表项的 可以被触发。选定的项目会突出显示,以便用户可以看到选定的内容。

项目类型活动

细节

sap-icon://edit提供了一个触发detailPress事件的详细信息按钮(带有图标)。

项目类型详情

DetailAndActive

顾名思义,这是 Detail 和 Active 类型的组合。因此,您可以在detailPress单击按钮时触发详细信息按钮,并且该项目本身会触发列表事件itemPress

项目类型 DetailAndActive

导航

这些项目具有类似导航的外观,itemPress并且项目press被调用。

项目类型导航

不活跃

不会从项目本身调用任何项目事件。


现在让我们来看看你的问题。您应该分配您的表格控件 amode或分配您的项目 a type。在那之后,事件应该被触发。

一般来说,我会避免同时使用 aListMode和 a ListType,因为可能会出现意外行为,但请自行检查。

于 2014-06-23T08:34:29.243 回答
2

type="Active"添加到 ColumnListItem

...
<items>
    <ColumnListItem type="Active">
        <cells>
            <Text text="{Name}"/>
        </cells>
    </ColumnListItem>
</items>
...

汪洋:https ://scn.sap.com/thread/3697995

于 2016-02-11T23:14:49.187 回答
1

使用 sap.m.CustomListItem 的简单解决方案

使用将 ListItem 的属性设置为

类型=“活动”新闻=“列表新闻”

<List items="{/results}"> 
<items>
<CustomListItem type="Active" press="listPress">
<content>
<VBox>
    <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="Start">
        <items>
            <Text text="{PernrName}" />
            <Text textDirection="RTL" text="{Document Status}" class='subtext'/>
        </items>
    </FlexBox>
    <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="End">
        <items>
            <Text text="{Date}" class='subtext'/>
            <Text textDirection="RTL" text="{Current Processor}" class='subtext'/>
        </items>
    </FlexBox>
</VBox> 
</content>
</CustomListItem>

于 2016-06-01T18:13:57.220 回答
0

在控制器中为 XML 视图定义 myItemPress 成员函数并将其引用为

itemPress = "myItemPress"

查看示例

于 2014-06-21T09:32:29.313 回答
0

OP 代码中的另一个问题是 itemPress 用于 Table 级别而不是 ListItemBase 级别。这确实会触发点击事件(如果type="Active"为 ListItemBase 元素设置,如其他答案中所述)。但是:事件的上下文不允许派生列表中单击的行!所以你得到一个事件,但你无法分辨它来自哪个项目。

以下是需要更改以识别 OP 示例中单击的行的内容,使用 ColumnListItem 作为 ListItemBase 的示例:

代替...

<Table
    ...
    itemPress="onItemPressed"
>
    <items> 
        <!-- sap.m.ListItemBase -->
    </items>
    <columns>
        <!-- sap.m.Column -->
    </columns>
</Table>

... 用这个:

<Table
    ...
>
    <items>
        <ColumnListItem 
            type="Active"
            press="onItemPressed"
        >
        ...
        </ColumnListItem>
    </items>
    <columns>
        <!-- sap.m.Column -->
    </columns>
</Table>

要导出单击行的模型路径,您现在可以使用如下代码:

onItemPressed: function (oEvt) {
    var sModelPath = oEvt.getSource().getBindingContext('myModelName').getPath();
    var sDiD = this.getView().getModel("myModelName").getProperty(sModelPath + "/myModelFieldName");
}

您还可以在 CustomListItem 中添加一个 customData 节点,该节点包含特定于行的信息,并通过以下方式在事件处理程序中访问它的键值对:

var aCustomData = oEvt.getSource().getCustomData();

但同样:
只有在 ListItemBase / ColumnListItem 级别调用 onItemPressed 时,这两种方法才有效!

于 2018-01-31T15:50:14.933 回答