javascript - dojoでのMultiSelectComboboxの問題

Question

複数のオプションを選択するには、各オプションの前にチェックボックスが付いたコンボボックスが必要でした。「dropdown：true」を使用してCheckedMultiSelectを使用してみました。

アイテムを選択すると、2つのアイテムが選択され、1つのアイテムが選択されたなどのコンボボックスの値が表示されます。

コンボボックスのテキスト領域で選択された値を区切り文字で区切って表示するにはどうすればよいですか？

checkedMultiSelectではcssやHTMLなどを変更する必要がありますか？

前もって感謝します。

score 10 · Accepted Answer

dojox.form.CheckedMultiSelect2番目の質問については、クラスとオーバーライド_updateSelectionおよびstartupメソッドを拡張する必要があります。

var MyCheckedMultiSelect = declare(CheckedMultiSelect, {

    startup: function() {
        this.inherited(arguments);  
        setTimeout(lang.hitch(this, function() {
            this.dropDownButton.set("label", this.label);            
        }));
    },

    _updateSelection: function() {
        this.inherited(arguments);                
        if(this.dropDown && this.dropDownButton) {
            var label = "";
            array.forEach(this.options, function(option) {
                if(option.selected) {
                    label += (label.length ? ", " : "") + option.label;
                }
            });

            this.dropDownButton.set("label", label.length ? label : this.label);
        }
    }

});

MyCheckedMultiSelectの代わりに使用dojox.form.CheckedMultiSelect：

var checkedMultiSelect = new MyCheckedMultiSelect ({
    dropDown: true,
    multiple: true,
    label: "Select something...",
    store: dataStore
}, "placeholder");

checkedMultiSelect.startup();

繰り返しますが、これをjsFiddleに追加しました：http：//jsfiddle.net/phusick/894af/

score 4 · Accepted Answer

@Craigのソリューションに加えて、CSSを介してチェックボックスのルックアンドフィールのみを追加する方法もあります。生成されたHTMLを調べると、各行<tr>が複数のテーブルセルを持つテーブル行として表されていることがわかります<td>。選択したアイテムのテーブル行はCSSクラス.dojoxCheckedMultiSelectMenuItemCheckedを取得するため、常にクラスを持つ最初のセルのスタイルを変更することをお勧めします.dijitMenuItemIconCell。

td.dijitMenuItemIconCell {
    width: 16px;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('some-unchecked-image-here.png');
}

tr.dojoxCheckedMultiSelectMenuItemChecked td.dijitMenuItemIconCell {
    background-image: url('some-checked-image-here.png');
}

だからあなたは得るでしょう：

ここに画像の説明を入力してください

以前に支援していたjsFiddleにこれを追加しました：http：//jsfiddle.net/phusick/894af/

score 0 · Accepted Answer

がtrueに設定されているCheckedMultiSelect場合、はチェックボックスを提供しません。dropDownユーザーがクリックして複数のアイテムをクリックして選択できるようにするだけです。

あなたが望むものを実装するために、ここで私の答えを見てください：

_HasDropdownと_AutoCompleterMixinを継承することによるカスタムdojoドロップダウンウィジェット

ではMyCustomDropDown、チェックボックスとアイテムのリストをカスタムウィジェットとして作成する必要があります。dojox.form._CheckedMultiSelectMenuそこにある機能を見て模倣し、別のUI（チェックボックス付き）を指定することをお勧めdojox.form._CheckedMultiSelectMenuItemします。

score 0 · Accepted Answer

dojox.form.CheckedMultiSelectはチェックボックスを表示しているはずですが、このチケットは問題を修正します。https://bugs.dojotoolkit.org/ticket/17103

javascript - dojoでのMultiSelectComboboxの問題

4 に答える 4

Related

Reference