如何在Smart Table中绑定自定义筛选栏值

问题背景 #

你已经实现了带Go按钮的自定义筛选栏，需要在点击Go时把筛选值绑定到Smart Table，并且不使用Smart Filter控件。原代码的问题在于直接调用bindRows会覆盖Smart Table原有绑定逻辑，而且没有处理空值筛选条件（空值会导致错误的过滤结果）。

优化后的XML代码 #

原XML配置可以保留，enableAutoBinding="true"会自动初始化绑定，我们只需要在点击Go时更新筛选条件即可：

<smartTable:SmartTable 
  id="smartTable_ResponsiveTable" 
  demandPopin="false" 
  tableType="Table" 
  editable="false" 
  entitySet="EntitySet" 
  showVariantManagement="true" 
  useVariantManagement="true" 
  useTablePersonalisation="true" 
  header="Request Pending My Action" 
  showRowCount="true" 
  useExportToExcel="true" 
  enableAutoBinding="true" 
  initialise="onInitialise" 
  persistencyKey="SmartTablePKey" 
  smartVariant="pageVariantId" 
  showFullScreenButton="true" 
  initiallyVisibleFields="Vin,Acind,Bukrs,Ekorg,Zzprimary,Zzscom1,Bunit,Lifnr,Name1,Status,Uname,Credat,Cretim">
</smartTable:SmartTable>

优化后的控制器代码 #

核心调整点：

• 只收集有输入值的筛选条件，避免空值Filter干扰结果
• 使用Smart Table底层绑定的filter方法，而非直接重新绑定行数据，保留Smart Table原有功能（分页、排序等）

onSearch: function() {
  const aFilters = [];
  const oView = this.getView();

  // 逐个判断输入框值，仅添加非空的筛选条件
  const sVin = oView.byId("Vin").getValue();
  if (sVin) {
    aFilters.push(new Filter("Vin", FilterOperator.EQ, sVin));
  }

  const sAcind = oView.byId("Acind").getValue();
  if (sAcind) {
    aFilters.push(new Filter("Acind", FilterOperator.EQ, sAcind));
  }

  const sBukrs = oView.byId("Bukrs").getValue();
  if (sBukrs) {
    aFilters.push(new Filter("Bukrs", FilterOperator.EQ, sBukrs));
  }

  const sEkorg = oView.byId("Ekorg").getValue();
  if (sEkorg) {
    aFilters.push(new Filter("Ekorg", FilterOperator.EQ, sEkorg));
  }

  const sZzprimary = oView.byId("Zzprimary").getValue();
  if (sZzprimary) {
    aFilters.push(new Filter("Zzprimary", FilterOperator.EQ, sZzprimary));
  }

  const sZzscom1 = oView.byId("Zzscom1").getValue();
  if (sZzscom1) {
    aFilters.push(new Filter("Zzscom1", FilterOperator.EQ, sZzscom1));
  }

  const sBunit = oView.byId("Bunit").getValue();
  if (sBunit) {
    aFilters.push(new Filter("Bunit", FilterOperator.EQ, sBunit));
  }

  const sLifnr = oView.byId("Lifnr").getValue();
  if (sLifnr) {
    aFilters.push(new Filter("Lifnr", FilterOperator.EQ, sLifnr));
  }

  const sName1 = oView.byId("Name1").getValue();
  if (sName1) {
    aFilters.push(new Filter("Name1", FilterOperator.EQ, sName1));
  }

  const sStatus = oView.byId("Status").getValue();
  if (sStatus) {
    aFilters.push(new Filter("Status", FilterOperator.EQ, sStatus));
  }

  const sUname = oView.byId("Uname").getValue();
  if (sUname) {
    aFilters.push(new Filter("Uname", FilterOperator.EQ, sUname));
  }

  const sCredat = oView.byId("Credat").getValue();
  if (sCredat) {
    aFilters.push(new Filter("Credat", FilterOperator.EQ, sCredat));
  }

  const sCretim = oView.byId("Cretim").getValue();
  if (sCretim) {
    aFilters.push(new Filter("Cretim", FilterOperator.EQ, sCretim));
  }

  // 获取Smart Table的行绑定，应用筛选条件
  const oSmartTable = oView.byId("smartTable_ResponsiveTable");
  const oTableBinding = oSmartTable.getTable().getBinding("rows");
  if (oTableBinding) {
    oTableBinding.filter(aFilters);
  }
}

额外注意事项 #

记得在控制器顶部引入Filter和FilterOperator类，否则代码会报错：

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/Filter",
  "sap/ui/model/FilterOperator"
], function(Controller, Filter, FilterOperator) {
  // 控制器其余代码
});

这种实现方式既完成了自定义筛选的需求，又保留了Smart Table的所有原生功能（如变体管理、导出Excel、分页等）。

内容的提问来源于stack exchange，提问作者Praveen Chan