web-dev-qa-db-ja.com

剣道マルチセレクトでデータ値を設定するには？

剣道マルチセレクトを使用しています。選択した値を複数選択にロードしたい。 Javaスクリプト）でデータ値をどのように設定しますか？次のスクリプトがあります。

$('#selectedFilters').kendoMultiSelect({
                    dataSource: data,
                    dataTextField: 'name',
                    dataValueField: 'value',
                    filter: 'contains',
                    placeholder: "Add Filter",
                    delay: 0,
                    minLength: 2,
                    highlightFirst: true,
                    ignoreCase: true,
                    change: function (event) {
                        applyFilters();
                    },
                });
jquerytelerikkendo-ui
9
Rodney

value() メソッドを使用して値を設定できます。

例として、次のHTMLを指定します。

<a href="#" id="button" class="k-button">Select</a>
<input id='selectedFilters'>

そしてJavaScript：

var data = [
    { name : "name1", value : "value1" },
    { name : "name2", value : "value2" },
    { name : "name3", value : "value3" },
    { name : "name4", value : "value4" },
    { name : "name5", value : "value5" },
    { name : "name6", value : "value6" }
];
var multiselect = $('#selectedFilters').kendoMultiSelect({
    dataSource    : data,
    dataTextField : 'name',
    dataValueField: 'value',
    filter        : 'contains',
    placeholder   : "Add Filter",
    delay         : 0,
    minLength     : 2,
    highlightFirst: true,
    ignoreCase    : true,
    change        : function (event) {
        console.log("change");
    }
}).data("kendoMultiSelect");

$("#button").on("click", function () {
    console.log("multiselect", multiselect);
    multiselect.value(["value1", "value2", "value6"]);
});

buttonをクリックすると、マルチバリューinputはname1、name2およびname6を取得します。

[〜＃〜] edit [〜＃〜]現在選択されている値に追加する場合は、次のようにします。

$("#button").on("click", function () {
    var selected = multiselect.value();
    var res = $.merge($.merge([], selected), ["value1", "value2", "value6"]);
    multiselect.value(res);
});

[〜＃〜]注[〜＃〜]：何らかの理由で、selected配列を再利用して新しい値を設定することはできません。新しいものを作成する必要があります。

実行していることを確認してください ここ

19
OnaBai

これを行う簡単な方法があります。すべての剣道コントロールには、豊富なクライアント側APIがあります。これがMultiSelectのAPIドキュメントページです http://docs.kendoui.c​​om/api/web/multiselect

今あなたの問題に来ています-これが私の解決策です：

マークアップ：

<select id="required" multiple="multiple" data-placeholder="Select attendees...">
            <option>Steven White</option>
            <option>Nancy King</option>
            <option>Anne King</option>
            <option>Nancy Davolio</option>
            <option>Robert Davolio</option>
            <option>Michael Leverling</option>
            <option>Andrew Callahan</option>
            <option>Michael Suyama</option>
            <option>Anne King</option>
            <option>Laura Peacock</option>
            <option>Robert Fuller</option>
            <option>Janet White</option>
            <option>Nancy Leverling</option>
            <option>Robert Buchanan</option>
            <option>Margaret Buchanan</option>
            <option>Andrew Fuller</option>
            <option>Anne Davolio</option>
            <option>Andrew Suyama</option>
            <option>Nige Buchanan</option>
            <option>Laura Fuller</option>
        </select>

JavaScript：

// create MultiSelect from select HTML element
var required = $("#required").kendoMultiSelect().data("kendoMultiSelect");

選択ボックスに選択した値を設定するには、value（）メソッドを使用する必要があります。これがコードです：単一の値を設定するには：

required.value("Laura Fuller")

複数の値を設定するには：

required.value(["Laura Fuller","Laura Peacock"]);

値をクリアするには、値として空の文字列を設定します

required.value("");

これで、既に選択したリストに何かを追加したい場合は、@ OnaBaiが彼のスニペットに示していることを実行できます。

それがウィジェットにあるすべてです:)

これがお役に立てば幸いです。

1
kashyapa

答えが出ても苦労しました。私の剣道グリッドには、6,000以上のアイテムがありました。それはほとんどの時間働いていました。選択範囲を更新した直後に問題が発生しました。

次のコードで問題が解決しました：

// Remove previous selected Filters. (This was undocumented method. I got from Kendo)
multiSelect.dataSource.filter({});

// Set the new filters
multiSelect.value(newlySelectedFilters);
1
Rodney