Listview Kendo UI移动列表视图的自定义过滤器？

是否可以应用自定义函数来过滤剑道UI移动列表视图？特别是，我希望通过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

选项只允许一个属性，不允许两个属性，也不允许自定义筛选函数。

您可以实现自己的筛选输入框，而不是使用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);

// ----------
var dataSource=new kendo.data.dataSource({
数据：[
{id:1，姓：'Mike'，姓：'Morris'}，
{id:2，名字：'Steve'，名字：'Bitner'}
]
});
var applyFilter=函数（）{
var toFind=$（“#搜索”）.val（）；
dataSource.filter({
逻辑：“或”，
过滤器：[
{字段：“firstName”，运算符：“contains”，值：toFind}，
{字段：“lastName”，运算符：“contains”，值：toFind}
]
});
};
$（“#myListView”）。kendoMobileListView({
数据源：数据源
模板：$（“#myTemplate”）.html（）
});
$（“#搜索”）。在（“键控”，applyFilter）；

---

基本思想是，每当有人在输入框中键入内容时，您都会得到值，并对绑定到ListView的数据源调用

.filter（）

。

而不是使用ListView的

filterable

选项，您可以实现自己的过滤器输入框，并使用

数据源.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);

// ----------
var dataSource=new kendo.data.dataSource({
数据：[
{id:1，姓：'Mike'，姓：'Morris'}，
{id:2，名字：'Steve'，名字：'Bitner'}
]
});
var applyFilter=函数（）{
var toFind=$（“#搜索”）.val（）；
dataSource.filter({
逻辑：“或”，
过滤器：[
{字段：“firstName”，运算符：“contains”，值：toFind}，
{字段：“lastName”，运算符：“contains”，值：toFind}
]
});
};
$（“#myListView”）。kendoMobileListView({
数据源：数据源
模板：$（“#myTemplate”）.html（）
});
$（“#搜索”）。在（“键控”，applyFilter）；

---

基本思想是，每当有人在输入框中键入时，您都会得到值，并对绑定到ListView的数据源调用

.filter（）

。

多亏了@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 }
        ]
    });
});

---

感谢@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 }
        ]
    });
});

---

这很有效！我担心我必须走这条路，但它很好。我扩展了您的解决方案，以包括

filterable

ListView选项，请参见下面的答案。在MVVM模型中，我们如何做到这一点？目前我的列表视图不使用$（“#myListView”）.kendoMobileListView（{}）；声明，但在

元素上使用data bind=“source:ds”。我不确定在可过滤操作符中的何处工作-仅供参考-我不是在寻找多个过滤器，而是更多关于此处显示的内容-@DropHit类似这样的内容：

这很好用！我担心我必须走这条路，但它很好。我扩展了您的解决方案，以包括
filterable
ListView选项，请参见下面的答案。在MVVM模型中，我们如何做到这一点？目前我的列表视图不使用$（“#myListView”）.kendoMobileListView（{}）；声明，但在
元素上使用data bind=“source:ds”。我不确定在filterable operator中的何处工作-仅供参考-我不是在寻找多个过滤器，而是在这里显示的更多内容-@DropHit类似这样的内容：