我使用sap.m.table模式“SingleSelectLeft”和聚合ColumnListItem类型为“Navigation”。
点击表格中的任何项目后,我想在split-app(详细信息页面)中显示另一个页面。我已将路由代码放在ColumnListItem的press事件中,但这导致了一个问题:
单击详细信息页面时,所选项目将关闭(未显示为已选中)。
以下是我正在使用的代码段:
<Table inset="false" noDataText="{i18n>noDataMasterTable}" mode="SingleSelectLeft" selectionChange="onLineItemSelected" id="s2-table"
updateFinished="onListUpdateFinished" items="{mainService>/Bp}" busyIndicatorDelay="{detailView>/lineItemTableDelay}"
itemPress="handleMasterPress" width="100%" >
<headerToolbar>
<OverflowToolbar>
<SearchField id="s2-searchfield-search" tooltip="{i18n>searchToolTip}" liveChange="onSearch" width="auto"></SearchField>
<Button id="s2-table-activate" text="Activate" press="handleActivateBusinessPurpose" enabled="false"/>
<Button id="s2-table-delete" text="{i18n>delete}" press="handleDelete" enabled="false"/>
<Button id="s2-table-add" icon="sap-icon://add" press="handleCreatePress" tooltip="{i18n>addToolTip}"/>
</OverflowToolbar>
</headerToolbar>
<columns>
<Column >
<Text text="{i18n>Name}"/>
</Column>
<Column>
<Text text="{i18n>ApplicationGroupName}"/>
</Column>
<Column demandPopin="true" minScreenWidth="Tablet">
<Text text="{i18n>DataSubjectType}"/>
</Column>
<Column demandPopin="true" minScreenWidth="Tablet">
<Text text="{i18n>LegalEntity}"/>
</Column>
<Column demandPopin="true" minScreenWidth="Tablet">
<Text text="{i18n>Status}"/>
</Column>
</columns>
<items>
<ColumnListItem type="Navigation" press="handleMasterPress">
<!--<ColumnListItem >-->
<cells>
<ObjectIdentifier title="{mainService>BusinessPurposeName}"/>
<ObjectIdentifier text="{mainService>ApplicationGroupName}"/>
<ObjectIdentifier text="{mainService>DataSubjectType}"/>
<ObjectIdentifier text="{mainService>LegalEntityValue}"/>
<ObjectStatus text="{path:'mainService>Status', formatter:'.formatPurposeStatus'}"
state="{path:'mainService>Status', formatter:'.formatStatusColor'}"/>
</cells>
</ColumnListItem>
</items>
</Table>
请告诉我如何在表格中突出显示所选项目。
答案 0 :(得分:1)
首先,您在按下并使用相同功能处理它们时触发了2个事件。因此,请删除itemPress="handleMasterPress"
或使用其他功能。
然后,handleMasterPress()将由<ColumnListItem type="Navigation" press="handleMasterPress">
所以在处理程序中,从事件对象获取源并将其传递给setSelectedItem()函数中的表
handleMasterPress: function(oEvent){
var oColumnListItem = oEvent.getSource();
var oTable = oColumnListItem.getParent();
oTable.setSelectedItem(oColumnListItem);
}
这是一个工作代码段
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
handleMasterPress: function(oEvent){
var oColumnListItem = oEvent.getSource();
console.log(oColumnListItem.getMetadata())
var oTable = oColumnListItem.getParent();
oTable.setSelectedItem(oColumnListItem);
}
});
// instantiate the View
var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
// create some dummy JSON data
var data = {
WaybillsPlaces: [{
CoNumber: "Item 1",
},{
CoNumber: "Item 2",
},{
CoNumber: "Item 3",
}]
};
// create a Model and assign it to the View
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
myView.setModel(oModel, "mainService");
// put the View onto the screen
myView.placeAt('content');
&#13;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<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-libs='sap.m'
data-sap-ui-xx-bindingSyntax='complex'></script>
<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
<!-- define a new (simple) View type as an XmlView
- using data binding for the Button text
- binding a controller method to the Button's "press" event
- also mixing in some plain HTML
note: typically this would be a standalone file -->
<script id="view1" type="sapui5/xmlview">
<mvc:View
controllerName="my.own.controller"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Panel headerText="Table Panel">
<Table inset="false" noDataText="{i18n>noDataMasterTable}" mode="SingleSelectLeft" selectionChange="onLineItemSelected" id="s2-table"
updateFinished="onListUpdateFinished" items="{mainService>/WaybillsPlaces}" busyIndicatorDelay="{detailView>/lineItemTableDelay}"
width="100%" >
<headerToolbar>
<OverflowToolbar>
<SearchField id="s2-searchfield-search" tooltip="{i18n>searchToolTip}" liveChange="onSearch" width="auto"></SearchField>
<Button id="s2-table-activate" text="Activate" press="handleActivateBusinessPurpose" enabled="false"/>
<Button id="s2-table-delete" text="{i18n>delete}" press="handleDelete" enabled="false"/>
<Button id="s2-table-add" icon="sap-icon://add" press="handleCreatePress" tooltip="{i18n>addToolTip}"/>
</OverflowToolbar>
</headerToolbar>
<columns>
<Column >
<Text text="{i18n>Name}"/>
</Column>
<Column>
<Text text="{i18n>ApplicationGroupName}"/>
</Column>
<Column demandPopin="true" minScreenWidth="Tablet">
<Text text="{i18n>DataSubjectType}"/>
</Column>
<Column demandPopin="true" minScreenWidth="Tablet">
<Text text="{i18n>LegalEntity}"/>
</Column>
<Column demandPopin="true" minScreenWidth="Tablet">
<Text text="{i18n>Status}"/>
</Column>
</columns>
<items>
<ColumnListItem type="Active" press="handleMasterPress">
<!--<ColumnListItem >-->
<cells>
<ObjectIdentifier title="{mainService>CoNumber}"/>
<ObjectIdentifier text="{mainService>CoNumber}"/>
<ObjectIdentifier text="{mainService>CoNumber}"/>
<ObjectIdentifier text="{mainService>CoNumber}"/>
<ObjectStatus text="{path:'mainService>Status', formatter:'.formatPurposeStatus'}"
state="{path:'mainService>Status', formatter:'.formatStatusColor'}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</Panel>
</mvc:View>
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
&#13;
答案 1 :(得分:-1)
将以下属性添加到Table元素中的items元素:
items="{
path: '{mainService>/Bp}',
type : 'sap.m.ListType.Active'
}"
参见
sap.m.ListType.Active
表示在按下项目时,通过主动反馈可以点击该项目。
来源:https://openui5.hana.ondemand.com/#/api/sap.m.ListType/overview