根据下拉列表中选定值的其他属性过滤本地Kendo数据源 [英] Filter local Kendo datasource based on other attribute of selected value in dropdown list

问题描述

我有一个本地Kendo数据源，该数据源具有以下值:

I have a LOCAL Kendo datasource which has the following values:

var dataSourceSearchOperators = new kendo.data.DataSource({
    data: [
    { OPERAND: "=", DATATYPE: "num", INFO: "Equal", OPERATOR: "eq" },
    { OPERAND: "<>", DATATYPE: "num", INFO: "Not Equal", OPERATOR: "nq" },
    { OPERAND: ">", DATATYPE: "num", INFO: "Greater Than", OPERATOR: "gt" },
    { OPERAND: "CW", DATATYPE: "text", INFO: "Contains Word", OPERATOR: "contains" },
    { OPERAND: "CP", DATATYPE: "text", INFO: "Contains Partial", OPERATOR: "" },
    { OPERAND: "NC", DATATYPE: "text", INFO: "Does Not Contain", OPERATOR: "" },
    ],
});

我有一个绑定到远程Kendo数据源的下拉列表，并且我想基于本地值中所选值的DATATYPE在该远程数据源上设置过滤.两个数据源共享公共属性DATATYPE.我基本上是在过滤第二个DDL的结果.例如:

I have a dropdownlist bound to a remote Kendo datasource and I want to set up filtering on that remote datasource based on the selected value's DATATYPE from the local one. Both datasources share the common attribute DATATYPE. I am basically filtering the results for a second DDL. For example:

DDL1选择的值是<>.然后仅显示DATATYPE ='num'的DDL2中的值(已过滤远程数据源).

DDL1 selected value is <>. Then only show me the values in DDL2 (the remote datasource is filtered) with DATATYPE='num'.

我不想使用级联功能. (使用javascript).

I don't want to use the cascade functionality. (using javascript).

谢谢！

推荐答案

您只需要在下拉列表中留意select事件.当值更改时，从所选项目中获取运算符，从中选择一个过滤器对象，然后将其传递到远程数据源上的DataSource.filter()中.

You just need to watch for the select event on your dropdown. When the value changes, get the operator from the selected item, build a filter object out of it, and pass it into DataSource.filter() on your remote datasource.

正在使用jsFiddle .

var dataSourceSearchOperators = new kendo.data.DataSource({
    data: [
    { OPERAND: "=", DATATYPE: "num", INFO: "Equal", OPERATOR: "eq" },
    { OPERAND: "<>", DATATYPE: "num", INFO: "Not Equal", OPERATOR: "neq" },
    { OPERAND: ">", DATATYPE: "num", INFO: "Greater Than", OPERATOR: "gt" }
    ]
});

var dataSourceToFilter = new kendo.data.DataSource({
    data: [
        { value: 1 },
        { value: 2 },
        { value: 3 },
        { value: 4 }
    ],
    schema: {
        model: {
            value: { type: "number" }
        }
    }
});

var onFilterOperatorSelected = function (selectEvent) {
    var operator = selectEvent.sender.dataItem(selectEvent.item.index()).OPERATOR;
    var filter = {
        field: "value",
        operator: operator,
        value: 2
    };
    dataSourceToFilter.filter(filter);
};

$("#operators").kendoDropDownList({
    dataSource: dataSourceSearchOperators,
    dataTextField: "INFO",
    dataValueField: "OPERAND",
    select: onFilterOperatorSelected
});

$("#list").kendoListView({
    dataSource: dataSourceToFilter,
    template: "<li>${value}</li>"
});

这篇关于根据下拉列表中选定值的其他属性过滤本地Kendo数据源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！