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 を共有しています。基本的に、2 番目の DDL の結果をフィルタリングしています。例えば：

DDL1 の選択値は <> です。次に、DATATYPE='num' の DDL2 の値のみを表示します (リモート データソースはフィルター処理されます)。

カスケード機能を使用したくありません。（JavaScriptを使用）。

ありがとう！

4

1 に答える 1

0

selectドロップダウンでイベントを監視するだけです。DataSource.filter()値が変更されたら、選択した項目から演算子を取得し、そこからフィルター オブジェクトを作成して、リモート データソースに渡します。

作業中の 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>"
});
于 2013-10-26T14:14:58.787 に答える