Kendo UI Mobile列表视图的自定义过滤器？

Posted 2023-05-07

【中文标题】Kendo UI Mobile列表视图的自定义过滤器？

【英文标题】：Custom filter for Kendo UI Mobile listview?

【发布时间】：2014-12-08 10:04:12

【问题描述】：

是否可以应用自定义函数来过滤 Kendo UI Mobile 列表视图？特别是我想通过我的 JS 对象的两个属性进行过滤，而不仅仅是一个属性。

我当前的代码：

$("#myListView").kendoMobileListView(
    dataSource: 
        [
             id: 1, firstName: 'Mike', lastName: 'Morris',
             id: 2, firstName: 'Steve', lastName: 'Bitner'
        ], // faked data
    template: $("#myTemplate").html(),
    filterable: 
        field: "firstName", // should be firstName+lastName
        operator: "contains",
        placeholder: "Name...",
        ignoreCase: true
    
);

在这个特定的示例中，我想按名字和姓氏进行过滤，但列表视图的 filterable.field 选项只允许一个属性，而不是两个，也不允许自定义过滤函数。

【参考方案1】：

不用ListView的filterable选项，你可以实现自己的过滤输入框，用DataSource.filter()改变过滤器。

我没有测试过这段代码，但它可能看起来像：

<input type="text" id="search" placeholder="name" />
<ul id="myListView"></ul>

// ----------

var dataSource = new kendo.data.DataSource(
    data: [
         id: 1, firstName: 'Mike', lastName: 'Morris',
         id: 2, firstName: 'Steve', lastName: 'Bitner'
    ]
);

var applyFilter = function () 
    var toFind = $("#search").val();
    dataSource.filter(
        logic: "or",
        filters: [
             field: "firstName", operator: "contains", value: toFind ,
             field: "lastName", operator: "contains", value: toFind 
        ]
    );
;

$("#myListView").kendoMobileListView(
    dataSource: dataSource
    template: $("#myTemplate").html()
);

$("#search").on("keyup", applyFilter);

基本思路是，只要有人在输入框中输入，你就得到值，然后在绑定到 ListView 的 DataSource 上调用.filter()。

【讨论】：

这很好用！我担心我不得不走这条路，但没关系。我扩展了您的解决方案以包括 filterable ListView 选项，请参阅下面的答案。

我们如何在 MVVM 模型中做到这一点？目前我的列表视图不使用 $("#myListView").kendoMobileListView();声明，而是在 元素上使用 data-bind="source: ds"。我不确定在可过滤运算符中在哪里工作 - 仅供参考 - 我不是在寻找多个过滤器，而是在寻找更多过滤器 - demos.telerik.com/kendo-ui/mobile-listview/filtering

@DropHit 类似这样：<ul data-role="listview" data-bind="source: source data-filterable="field: 'ProductName', operator: 'startswith'" data-template="mobile-listview-filtering-template"></ul> 这是一个工作示例：dojo.telerik.com/iFuRE

【参考方案2】：

感谢@CodingWithSpike，我现在有了以下可行的解决方案：

$("#myListView").kendoMobileListView(
    dataSource: new kendo.data.DataSource(
        data:
        [
             id: 1, firstName: 'Mike', lastName: 'Morris',
             id: 2, firstName: 'Steve', lastName: 'Bitner'
        ] // faked data
    ),
    template: $("#myTemplate").html(),
    filterable: 
        field: "_",  // dummy field to get the filterable working
        placeholder: "Name..."
    
);

$('[type="search"]').on("keyup", function () 
    var filterTerm = $(this).val();
    $("#myListView").data("kendoMobileListView").dataSource.filter(
        logic: "or",
        filters: [
             field: "firstName", operator: "contains", value: filterTerm ,
             field: "lastName", operator: "contains", value: filterTerm 
        ]
    );
);