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

时间:2018-02-27 05:41:23

标签: sapui5

我使用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>

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

2 个答案:

答案 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);
}

这是一个工作代码段

&#13;
&#13;
// 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;
&#13;
&#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