web-dev-qa-db-ja.com

Select2に複数の列を表示する

select2 を使用していて、マルチカラムテーブルをドロップダウンとして表示したいので、ドロップダウンコンテナの幅を入力自体とは異なる（大きい）幅にする必要があります

それは可能ですか？

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

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

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

-

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

javascriptjquery-select2dropdownbox
13
opensas

典型的なテーブルヘッダー行として機能するように列の上に固定ヘッダー行を設定することでまだ成功していませんが、実際に列をそこに出すという観点から、この機能リクエストを参照しました Github では、ユーザーtrebuchettyが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>';
},

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

4
A. Murray

formatresultうまくいきませんでした！しかしtemplateResultは正常に動作しますこのようにデータフォームPHP生成されたHTML（ajaxではありません）コンテンツ）。

これが私にとってのうわべだけのコードです。列をパイプ文字で区切ります（2つ以上の列を持つことができます）：

html（PHPから）：

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

javascript（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;
    }
});
3
Meloman

Select2 v3.5を使用する場合、回避策は次のとおりです。

function formatResultMulti(data) {
  var city = $(data.element).data('city');
  var classAttr = $(data.element).attr('class');
  var hasClass = typeof classAttr != 'undefined';
  classAttr = hasClass ? ' ' + classAttr : '';

  var $result = $(
    '<div class="row">' +
    '<div class="col-md-6 col-xs-6' + classAttr + '">' + data.text + '</div>' +
    '<div class="col-md-6 col-xs-6' + classAttr + '">' + city + '</div>' +
    '</div>'
  );
  return $result;
}

$(function() {
  $('#multi').select2({
    width: '100%',
    formatResult: formatResultMulti
  });
})
body{
  background-color: #455A64;
}

#multiWrapper {
  width: 300px;
  margin: 25px 0 0 25px;
}

.def-cursor {
  cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js"></script>
<div id='multiWrapper'>
  <select id="multi">
    <optgroup class='def-cursor' label='Country' data-city='City'>
      <option data-city="Athens" id="1" selected>Greece</option>
      <option data-city="Rome" "id="2 ">Italy</option>
  <option data-city="Paris " "id="3">France</option>
    </optgroup>
  </select>
</div>
2
chemark

これが私の解決策です。私のselect2バージョンは4.0.3です。

最終的なプレゼンテーションは次のようになります： select2-dropdown-table 。

Select2ドロップダウンが開いたら、最初にヘッダーを追加します。

    var headerIsAppend = false;
    $('#stock').on('select2:open', function (e) {
        if (!headerIsAppend) {
            html = '<table class="table table-bordered" style="margin-top: 5px;margin-bottom: 0px;">\
                <tbody>\
                <tr>\
                    <td width="20%"><b>药品名称</b></td>\
                    <td width="10%"><b>成本价</b></td>\
                    <td width="20%"><b>供应商</b></td>\
                    <td width="10%"><b>批号</b></td>\
                    <td width="20%"><b>有效期</b></td>\
                    <td width="20%"><b>库存数量</b></td>\
                </tr >\
                </tbody>\
                </table>';
            $('.select2-search').append(html);
            $('.select2-results').addClass('stock');
            headerIsAppend = true;
        }
    });

次に

templateResult: function (repo) {
            if (repo.medicine) {
                var html = '<table class="table table-bordered" style="margin-bottom: 0px;">\
                <tbody>\
                <tr>\
                    <td width="20%">' + repo.medicine.name + '</td>\
                    <td width="10%">' + repo.costPrice + '</td>\
                    <td width="20%">' + repo.vendor + '</td>\
                    <td width="10%">' + repo.batchNum + '</td>\
                    <td width="20%">' + repo.expiredDate + '</td>\
                    <td width="20%">' + repo.quantity + '</td>\
                </tr >\
                </tbody>\
                </table>';
                return $(html);
            }
        },

残りの作業は、cssを調整する必要があります。

.stock .select2-results__option {
  padding: 0px 4px;
}

それで全部です。

1
Xiaohui

私はうまくいけば他の人を助ける私の解決策を与えたかった。

Select2v4テーブルスタイルと複数列検索を使用します。これはローカルJSONデータを使用します。

これがどのように機能するかの概要：

2つの機能があります。 matcher関数とformatSelect。

クエリにはmatcher関数が使用されます。クエリの各単語をチェックして、いずれかの行に一致するものがあるかどうかを確認します。現在、少なくとも1単語に一致する行を返すように設定されています。

formatSelectが一致するすべての行（クエリがない場合はすべての行）を返すと、matcher関数が実行されます。 formatSelectは、最初の行がレンダリングされている場合、データの最初の行にヘッダー列を追加します。

この場合のテーブルは、構造にbootstrap列幅を使用します。

コード：

var firstEmptySelect = true;

function formatSelect(result) {
    if (!result.id) {
        if (firstEmptySelect) {
            console.log('showing row');
            firstEmptySelect = false;
            return '<div class="row">' +
                    '<div class="col-xs-3"><b>Client</b></div>' +
                    '<div class="col-xs-3"><b>Account</b></div>' +
                    '<div class="col-xs-3"><b>Deal</b></div>' +
                    '</div>';
        } else {
            console.log('skipping row');
            return false;
        }
        console.log('result');
        console.log(result);
    }
    return '<div class="row">' +
                 '<div class="col-xs-3">' + result.client_name + '</div>' +
                 '<div class="col-xs-3">' + result.account_name + '</div>' +
                 '<div class="col-xs-3">' + result.deal_name + '</div>' +
                 '</div>';      
}

function matcher(query, option) {
    firstEmptySelect = true;
    if (!query.term) {
        return option;
    }
    var has = true;
    var words = query.term.toUpperCase().split(" ");
    for (var i =0; i < words.length; i++){
        var Word = words[i];
        has = has && (option.text.toUpperCase().indexOf(Word) >= 0); 
    }
    if (has) return option;
    return false;
}

$('#selectAccountDeal').select2({
    data: {!! $deals !!},
    width: '100%',
    templateResult: formatSelect,
    templateSelection: formatSelect,
    escapeMarkup: function(m) { return m; },
    matcher: matcher
})

私の例のJSONデータ

[{
    "text": "JL - o yea - Testing this deal",
    "id": 4,
    "client_name": "JL",
    "account_name": "o yea",
    "deal_name": "Testing this deal"
}, {
    "text": "JL - test - fj;askld fj",
    "id": 3,
    "client_name": "JL",
    "account_name": "test",
    "deal_name": "fj;askld fj"
}]

選択した要素のHTML

<select id="selectAccountDeal" name="account_deal_id" placeholder="Select your Deal" required>
  <option></option>
</select>

select2ドロップダウンの例

select2 table view

1
BrinkDaDrink

これを参照すると役立つ場合があります。ここでは、select2のような構造の列を作成するコンポーネント https://github.com/suriyagp/Grid-Select

0
fidel castro

SELECT2V4を使用しています。 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
        }

こんな感じです。

0
Hoong

私の例（メロマンの答えに基づく）はおそらく他の誰かを助けることができます：

// HTML
 <select 
    class="form-control select2" 
    data-col0htmldebut="<div class='col-md-6'>" 
    data-col0htmlfin="</div>" 
    data-col1htmldebut="<div class='col-md-2'>" 
    data-col1htmlfin="</div>" 
    data-col2htmldebut="<div class='col-md-4'>" 
    data-col2htmlfin="</div>">
          <option value="">Select...</option>
          <option value="-1">Text with no column</option>
          <option value="1">Column1__|__Col2__|__Col3</option>
          <option value="2">Column1__|__Col2__|__Col3</option>
 </select>

$("select.select2").select2({
    templateResult: function (data) {
        if (data.element == null) return data.text;


        /**************  Just one column handler **************/

        // __|__ text seperator between each col find ?
        var arrTexteOption = data.text.split('__|__');
        if (arrTexteOption.length <= 1) return data.text;


        /**************  Multi column handler **************/

        // Get select object
        var objSelect = $("#" + data.element.parentNode.id);

        // 4 column handled here
        var arrStyleColDébut = [];
        var arrStyleColFin = [];

        for (var i = 0; i < 4; i++)
        {
            if (objSelect.attr('data-col' + i + 'htmldebut'))   arrStyleColDébut.Push(objSelect.data("col" + i + "htmldebut"));
            if (objSelect.attr('data-col' + i + 'htmlfin'))     arrStyleColFin.Push(objSelect.data("col" + i + "htmlfin"));
        }

        if (arrTexteOption.length != arrStyleColDébut.length) return data.text;

        var $htmlResult = '<div class="row">';
        for (var i = 0; i < arrTexteOption.length; i++)
        {
            $htmlResult += arrStyleColDébut[i] + arrTexteOption[i] + arrStyleColFin[i];
        }
        $htmlResult += "</div>";

        return $($htmlResult);
    },
    templateSelection: function (data) {
        // Selection must display only the first col.
        return data.text.split('__|__')[0];
    }
});
0
Math-Asteos