18

select2を使用していて、複数列のテーブルをドロップダウンとして表示したいので、ドロップダウン コンテナーの幅を入力自体とは異なる (大きい) 幅にする必要があります。

それは可能ですか？

さらに、いくつかの列を持つテーブルを表示したいと思います。映画の例から、formatResult 関数で行ごとに新しいテーブルを作成することがわかりました。

すべてのセルが同じ幅になるように、同じテーブルにすべての行を含めることは可能でしょうか? 行などを含むテンプレートを設定する必要があります。

私が達成したいのは、エンティティのコードを表示するための小さな入力と、さらにいくつかの列を表示するための大きなドロップダウンです

--

github の関連する問題は次のとおりです: https://github.com/ivaynberg/select2/issues/1314

4

8 に答える 8

7

formatresultはうまくいきませんでした! しかし、は、HTML で生成されたデータ フォーム PHP (ajax コンテンツではない) でこのようにうまく機能します。

これが私のための作業コードです。パイプ文字で列を区切ります（2つ以上の列を持つことができます）：

html (PHP から) :

<option value="...">
    column 1 text | column 2 text
</option>

ジャバスクリプト（jQuery）：

$('#selectSubstance').select2({
    templateResult: function(data) {
        var r = data.text.split('|');
        var $result = $(
            '<div class="row">' +
                '<div class="col-md-3">' + r[0] + '</div>' +
                '<div class="col-md-9">' + r[1] + '</div>' +
            '</div>'
        );
        return $result;
    }
});

編集 2021-06-28

選択した項目 (閉じた選択) に同じビジュアルが必要な場合は、同じ構文を次のように使用します。templateSelection:

例えば ​​：

$('#selectProduct').select2({            
    placeholder: 'Choose a product.',
    templateResult: function(data) {
        var r = data.text.split('| ');
        var result = jQuery(
            '<div class="row">' +
                '<div class="col-md-3">' + r[0] + '</div>' +
                '<div class="col-md-9">' + r[1] + '</div>' +
            '</div>'
        );
        return result;
    },
    templateSelection: function(data) {
        var r = data.text.split('| ');
        var result = jQuery(
            '<div class="row">' +
                '<div class="col-md-3">' + r[0] + '</div>' +
                '<div class="col-md-9">' + r[1] + '</div>' +
            '</div>'
        );
        return result;
    }
});
于 2016-10-13T17:26:04.790 に答える
4

列の上に固定ヘッダー行を配置して、典型的なテーブル ヘッダー行として機能させることにはまだ成功していませんが、実際に列をそこに配置するという点では、ユーザー trebuchetty がほのめかしているGithub のこの機能要求を参照しました。 col-md-6 (ブートストラップ バージョン >= 3) のようなブートストラップのグリッド スタイルを使用します。

select2オプションで次のことを試しましたが、良い結果が得られるようです:

formatResult: function(result) {
    return '<div class="row">' +
           '<div class="col-md-6">' + result.name + '</div>' +
           '<div class="col-md-6">' + result.manager + '</div>' +
           '</div>';
},

上記の結果は、ドロップダウンに表示されるアイテムの配列内の要素への参照です

于 2014-01-30T14:01:56.943 に答える
0

私はSELECT2 V4を使用しています。BrinkDaDrink のアイデアに感謝します。私はいくつかの変更を行い、コードを簡素化しました。以下は私のサンプルです：

        var firstEmptySelect = true; // Indicate header was create

        function s2FormatResult(item) {

            if (!item.id) {
                // trigger when remote query
                firstEmptySelect = true; // reset
                return item.text;
            }

            var $container; // This is custom templete container.

            // Create header
            if (firstEmptySelect) {

                firstEmptySelect = false;

                $container = $(
                    '<div class="row">' +
                    '<div class="col-xs-3"><b>Product ID</b></div>' +
                    '<div class="col-xs-3"><b>Product Name</b></div>' +
                    '</div>' +
                    '<div class="row">' +
                    '<div class="col-xs-3">' + item.id + '</div>' +
                    '<div class="col-xs-3">' + item.text + '</div>' +
                    '</div>'
                );

            }
            else {
                $container = $('<div class="row">' +
                    '<div class="col-xs-3">' + item.id + '</div>' +
                    '<div class="col-xs-3">' + item.text + '</div>' +
                    '</div>');
            }


          return $container
        }

こんな感じです。

于 2019-11-04T08:14:35.810 に答える