首页 文章

根据下拉列表中所选值的其他属性过滤本地Kendo数据源

提问于
浏览
0

我有一个LOCAL Kendo数据源,它具有以下值:

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的结果 . 例如:

DDL1选择的值为<> . 然后只显示DDL2中的值(远程数据源被过滤),DATATYPE ='num' .

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

谢谢!

1 回答

  • 0

    您只需要在下拉列表中查看 select 事件 . 当值更改时,从所选项中获取操作符,从中构建过滤器对象,并将其传递到远程数据源上的 DataSource.filter() .

    Working 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>"
    });
    

相关问题