Question

嗨我有一个带有此代码的搜索字段：

onSearch : function (oEvent) {
    if (oEvent.getParameters().refreshButtonPressed) {
        // Search field's 'refresh' button has been pressed.
        // This is visible if you select any master list item.
        // In this case no new search is triggered, we only
        // refresh the list binding.
        this.onRefresh();
    } else {
        var andFilter = [];
        var sQuery = oEvent.getParameter("query");
        if (sQuery && sQuery.length > 0) {
            // add filters
            var oTableSearchState = [];
            oTableSearchState = [new Filter("Supplier", FilterOperator.Contains, sQuery),                                        new Filter("BusArea", FilterOperator.Contains, sQuery),             new Filter("CostCenter", FilterOperator.Contains, sQuery),
            new Filter("FuncArea", FilterOperator.Contains, sQuery)];
            andFilter.push(new Filter(oTableSearchState, false));
        }
        this._applySearch(andFilter);
   }
},

一个过滤器按钮，应添加附加过滤器。像这样：

onSetFilter : function(oEvent) {
    var andFilter = [];
    andFilter.push(new Filter("BusArea", FilterOperator.EQ, "5000"));
    this._applySearch(andFilter);
},

但当然“BusArea”部分应该取决于选择的过滤器。它可能超过1个过滤器。 _applySearch函数如下所示：

_applySearch: function(andFilter) {
    var oViewModel = this.getModel("worklistView");
    this._oTable.getBinding("items").filter(andFilter, true);
    // changes the noDataText of the list in case there are no filter results
    if (andFilter.length !== 0) {
        oViewModel.setProperty("/tableNoDataText", 
        this.getResourceBundle().getText("worklistNoDataWithSearchText"));
    }
}

问题是，当我通过过滤器按钮添加过滤器时，搜索栏中的过滤器会消失，反之亦然。如何更改我的代码，以便我可以添加过滤器而不删除现有的过滤器？

Answer 1

一种解决方案是从绑定信息中获取过滤器，并使用and与新过滤器一起推回。

this._oTable.getBindingInfo("items").filters.aFilters;

Answer 2

在我们谈论聊天之后，我使用全局模型制作了这个片段。

https://jsbin.com/pewavuhonu/edit?html,output

ComboBox和Button模拟您的对话框。输入模拟SearchField

两者都绑定到全局＆＃34; filtersModel＆＃34;，并且在提交信息时都调用_calculateFilters（）函数

＆＃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 xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
			<Panel headerText="Filters">
				<VBox>
					<HBox>
						<Label text="Filter by Customer:" class="sapUiSmallMarginTop sapUiSmallMarginEnd"/>
						<ComboBox id="comboBox" selectedKey="{filtersModel>/customerFilter}">
							<items>
								<core:Item key="VINET" text="VINET" />
								<core:Item key="TOMSP" text="TOMSP" />
								<core:Item key="HANAR" text="HANAR" />
								<core:Item key="VICTE" text="VICTE" />
								<core:Item key="SUPRD" text="SUPRD" />
							</items>
						</ComboBox>
						<Button text="Apply this Filter" press="_calculateFilters"></Button>
					</HBox>
				</VBox>
				<VBox>
					<HBox>
						<Input value="{filtersModel>/shipAddressFilter}" id="input" submit="_calculateFilters" width="500px" placeholder="Filter by ShipAddress: Write and enter for filtering"/>
					</HBox>
				</VBox>
			</Panel>
			<Panel>
				<List id="list" items="{/Orders}">
					<StandardListItem title="{CustomerID}" info="{ShipAddress}"/>
				</List>
			</Panel>
		</mvc:View> 
        </script>


		<script>
			// define a new (simple) Controller type
			sap.ui.controller("my.own.controller", {
				
				onInit: function(){
					var oFiltersModel = new sap.ui.model.json.JSONModel();
					sap.ui.getCore().setModel(oFiltersModel, "filtersModel");
				},
				
				_calculateFilters: function(){					
					var	oSelect = this.getView().byId("comboBox"),
						oListBinding = this.getView().byId("list").getBinding("items"),
						oFiltersModel = sap.ui.getCore().getModel("filtersModel"),
						oCustomerFilterValue = oFiltersModel.getProperty("/customerFilter"),
						oShipAddressValue = oFiltersModel.getProperty("/shipAddressFilter"),
						oFilters = [];
					
					if(oCustomerFilterValue){
						oFilters.push(new sap.ui.model.Filter("CustomerID", "EQ", oCustomerFilterValue));
					}
					if(oShipAddressValue){
						oFilters.push(new sap.ui.model.Filter("ShipAddress", "Contains", oShipAddressValue));
					}
					
					oListBinding.filter(oFilters);
				}
			});
	
	
	
			/*** THIS IS THE "APPLICATION" CODE ***/

			// create some dummy JSON data
			var data = {
				actionName: "Say Hello"
			};

			// instantiate the View
			var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above

			// create a Model and assign it to the View
			var uri = "https://cors-anywhere.herokuapp.com/services.odata.org/Northwind/Northwind.svc"; // local proxy for cross-domain access
			var oModel = new sap.ui.model.odata.ODataModel(uri, {
				maxDataServiceVersion: "2.0"
			}); 
			myView.setModel(oModel);
    	   	

			// put the View onto the screen
			myView.placeAt('content');

		</script>
	
	</head>
	<body id='content' class='sapUiBody'>
	</body>
</html>

＆＃13;

添加第二个过滤器而不删除现有过滤器

2 个答案: