在 SAP UI5 中突出显示选定的表行

Question

我正在使用模式“SingleSelectLeft”和“导航”类型的聚合 ColumnListItem 的 sap.m.table。

单击表格中的任何项目时，我想在拆分应用程序中显示另一个页面（详细信息页面）。我已将路由代码放在 ColumnListItem 的新闻事件中，但这会导致以下问题：

当我单击详细信息页面时，所选项目会熄灭（未显示为选中状态）。

这是我正在使用的 sn-p：

            <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>

请告诉我如何在表格中突出显示所选项目。

Answer 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);
}

这是一个有效的 sn-p

// 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');

<!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>

Answer 2

将以下属性添加到 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