在SAP UI5 SmartTable中启用过滤可以通过以下步骤实现:
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.comp.smartfilterbar" xmlns:smartTable="sap.ui.comp.smarttable">
<smartTable:SmartTable id="mySmartTable" smartFilterId="mySmartFilterBar" tableType="ResponsiveTable" />
<SmartFilterBar id="mySmartFilterBar" />
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("myController", {
onInit: function() {
this._oSmartTable = this.getView().byId("mySmartTable");
this._oSmartFilterBar = this.getView().byId("mySmartFilterBar");
this._oSmartTable.setSmartFilterId(this._oSmartFilterBar.getId());
}
});
});
<smartTable:SmartTable id="mySmartTable" smartFilterId="mySmartFilterBar" tableType="ResponsiveTable">
<smartTable:Table>
<Table id="myTable" rows="{path: '/MyEntitySet'}">
<columns>
<Column>
<Text text="Column 1" />
</Column>
<Column>
<Text text="Column 2" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{Column1}" />
<Text text="{Column2}" />
</cells>
</ColumnListItem>
</items>
</Table>
</smartTable:Table>
</smartTable:SmartTable>
<SmartFilterBar id="mySmartFilterBar">
<GroupItems>
<GroupItem groupName="Group 1" name="Field1" label="Field 1" />
<GroupItem groupName="Group 1" name="Field2" label="Field 2" />
</GroupItems>
</SmartFilterBar>
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator"
], function(Controller, Filter, FilterOperator) {
"use strict";
return Controller.extend("myController", {
onInit: function() {
this._oSmartTable = this.getView().byId("mySmartTable");
this._oSmartFilterBar = this.getView().byId("mySmartFilterBar");
this._oSmartTable.setSmartFilterId(this._oSmartFilterBar.getId());
},
onFilter: function() {
var aFilters = [];
var sField1 = this._oSmartFilterBar.getControlByKey("Field1").getValue();
if (sField1) {
var oFilter = new Filter("Column1", FilterOperator.EQ, sField1);
aFilters.push(oFilter);
}
var sField2 = this._oSmartFilterBar.getControlByKey("Field2").getValue();
if (sField2) {
var oFilter = new Filter("Column2", FilterOperator.EQ, sField2);
aFilters.push(oFilter);
}
var oBinding = this._oSmartTable.getTable().getBinding("rows");
oBinding.filter(aFilters);
}
});
});
以上步骤完成后,用户在SmartFilterBar中输入过滤条件后,点击过滤按钮,SmartTable将根据条件过滤数据并刷新显示。
领取专属 10元无门槛券
手把手带您无忧上云