Question

是否可以应用自定义功能来过滤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
    }
});

在这个特定的例子中，我想按firstName和lastName进行过滤，但listview的filterable.field选项只允许一个属性，而不是两个属性，也不是自定义过滤器函数。

Answer 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()。

Answer 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 }
        ]
    });
});

Kendo UI Mobile listview的自定义过滤器？

2 个答案: