如何在SmartTable中添加自定义列？

Question

我在smartTable中显示数据。现在我想添加一个自定义图标列。这可能吗 ？例如，我有一个SmartTable和一个JSON模型，如下所示，我想在First Column中显示JSON Model值为Text。

<mvc:View 
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    controllerName="sap.ui.demo.smartControls.SmartTable"
    xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
    xmlns:smartTable="sap.ui.comp.smarttable">
    <smartFilterBar:SmartFilterBar 
    id="smartFilterBar"
    entityType="Product">
    <smartFilterBar:controlConfiguration>
    <smartFilterBar:ControlConfiguration
    key="Category" visibleInAdvancedArea="true"
    preventInitialDataFetchInValueHelpDialog="false">
    </smartFilterBar:ControlConfiguration>
    </smartFilterBar:controlConfiguration>
    </smartFilterBar:SmartFilterBar>
    <smartTable:SmartTable 
    id="smartTable_ResponsiveTable"
    smartFilterId="smartFilterBar" 
    tableType="ResponsiveTable" 
    editable="false"
    entitySet="Products" 
    useVariantManagement="false"
    useTablePersonalisation="false" 
    header="Products" 
    showRowCount="true"
    useExportToExcel="false" 
    enableAutoBinding="true">
    </smartTable:SmartTable>
    </mvc:View>

并且在控制器的onInit（）方法中我有json模型。

var oData = { "Text": "StackOverFlow"};
var oModel = sap.ui.model.json.JSONModel(oData);
sap.ui.getCore().setModel(oModel);

此致 Mayank

Answer 1

这里有一个例子：

SAP Developer Guide - Smart table

我最近在一个应用程序中使用oData服务执行此操作，应该与来自JSON Model的数据类似。这就是我的样子：

	<smartTable:SmartTable 
		id="gSmartTable"
		initialise="onSmartTable"
		beforeRebindTable="onBeforeRebindTable"
		showOverlay="onShowOverlay"
		entitySet="Employees" 
		smartFilterId="gSmartFilterBar" 
		tableType="ResponsiveTable" 
		useExportToExcel="false" 
		useVariantManagement="false" 
		useTablePersonalisation="true"
		persistencyKey="gSmartTable_Explored"
		header="Workers" 
		showRowCount="true"
		enableAutoBinding="true"
		demandPopin="true">	
		
		
		
	<!-- Build table to handle custom field -->
		<Table id ="gEmployeesTable" growing="true" growingScrollToLoad="true" growingThreshold="20">
			<columns>
			<Column width="100px" hAlign="Left">
					<customData>
						<!-- Custom Field -->
						<core:CustomData key="p13nData"
							value='\{"columnKey": "Pernr", "maxLength": "5","columnIndex":"0", "leadingProperty": "Pernr"}' />
					</customData>
						<Text text="{i18n>tableColumnEmployeeID}" />
				</Column>
				<Column width="100px" hAlign="Left">
					<customData>
						<!-- Custom Field -->
						<core:CustomData key="p13nData"
							value='\{"columnKey": "ZQ_STAT", "maxLength": "5","columnIndex":"4", "leadingProperty": "ZQ_STAT"}' />
					</customData>
						<Text text="{i18n>tableColumnStatus}" />
				</Column>
			</columns>
			<items>
				<!-- Table Navigation -->
				<ColumnListItem type="Navigation" press="onPress">
					<cells>
						<!-- Use formatter to dispay Pernr -->
					<Text text="{
					path: 'Pernr',
					formatter: '.formatter.stripZeros'
					}" />
					</cells>
					<cells>
						<!-- Use formatter to dispay icon colour based on status field value (0,1,2,3) -->
						<core:Icon 
						src="{
							path: 'ZQ_STAT',
							formatter: '.formatter.iconVis'
							}" 
						color="{
							path: 'ZQ_STAT',
							formatter: '.formatter.iconColour'
							}"/>
					</cells>
				</ColumnListItem>
			</items>
		</Table>
	<!-- End Custom Table -->
	
	<!-- End Smart Table -->
	</smartTable:SmartTable>

我能够添加两个自定义字段，并在数据上添加格式化程序。如果您希望首先显示自定义列，请相应地设置“columnIndex”属性。

希望有所帮助！