简单的智能过滤栏示例

Question

我正在尝试在我的智能表上实现智能过滤栏。我的智能表包含一个简单的表，其中包含来自 formatter.js 的计算字段

<smartFilterBar:SmartFilterBar id="smartFilterBar" entitySet="/abc">
    <smartFilterBar:controlConfiguration>
        <smartFilterBar:ControlConfiguration key="Order" label="ProdOrder">
            <smartFilterBar:customControl>
                <Input id="Order" placeholder="Order"/>
            </smartFilterBar:customControl>
        </smartFilterBar:ControlConfiguration>
    </smartFilterBar:controlConfiguration>
</smartFilterBar:SmartFilterBar>
<smartTable:SmartTable id="smartTable_ResponsiveTable" smartFilterId="smartFilterBar" tableType="ResponsiveTable" entitySet="abc"
    enableAutoBinding="true" showRowCount="true">
    <smartTable:customData>
        <core:CustomData key="p13nDialogSettings" value='{filter:{visible:false}}'></core:CustomData>
    </smartTable:customData>
    <Table id="table" width="auto" class="sapUiResponsiveMargin">
        <columns>
            <Column id="idColumnOrder" customData:p13nData='\{"leadingProperty":["ManuOrder"]}'>
                <Text text="{i18n>order}" id="order" tooltip="{i18n>order}"/>
            </Column>
        </columns>
        <items>
            <ColumnListItem>
                <cells>
                    <ObjectIdentifier class="sapUiTinyMarginTopBottom" title="{ManuOrder}"/>
                </cells>
            </ColumnListItem>
        </items>
    </Table>
</smartTable:SmartTable>

但是，不知何故，我的智能过滤器无法正常工作。我用谷歌搜索了很多，但找不到解决方案。有人可以告诉我出了什么问题，或者可以分享如何正确实施智能过滤器的任何示例吗？

提前致谢:)

Answer 1

当使用SmartTable 而不是常规的Table 时，为 SmartFilterBar 分配一个 id，然后将属性 smartFilterId 设置为等于 SmartFilterBar 的 id。然后自动进行搜索和过滤。

<smartFilterBar:SmartFilterBar id="smartFilterBar"...>
...
</smartFilterBar:SmartFilterBar>
<smartTable:SmartTable smartFilterId="smartFilterBar"...>
...
</smartTable:SmartTable>

或者，如果您使用像您提供的代码一样的常规Table，则必须使用控制器来获取过滤器并使用它们来过滤表的绑定。您需要首先将您的表绑定到一个实体集（或者如果您使用的是 JSON 模型中的一个属性），然后为 SmartFilterBar 的搜索事件添加一个事件处理程序。

在你看来：

<smartFilterBar:SmartFilterBar id="smartFilterBar" search="onSearch"...>
...
</smartFilterBar:SmartFilterBar>
<Table id="table" items="{/entitySetName}"...>
...
</Table>

在您的控制器中：

onSearch: function() {
    var aFilters = this.getView().byId("smartFilterBar").getFilters();
    this.getView().byId("table").getBinding("items").filter(aFilters);
}