Показать несколько столбцов в Select2

Question

Я использую select2, и я хотел бы показать многоцветную таблицу как выпадающую, поэтому мне нужно, чтобы ширина выпадающего контейнера имела разную (большую) ширину, чем сам вход

Возможно ли это?

Кроме того, я хотел бы показать таблицу с несколькими столбцами. В примере с фильмами я увидел, что в функции formatResult вы создаете новую таблицу для каждой строки.

Можно ли включить каждую строку в одну таблицу, чтобы каждая ячейка имела одинаковую ширину? Мне нужно было бы установить некоторый шаблон, чтобы содержать строки или что-то в этом роде.

То, что я хочу достичь небольшой вход, чтобы показать код объекта, и большое выпадающий показать еще несколько столбцов

-

вот смежный вопрос на GitHub: https://github.com/ivaynberg/select2/issues/1314

Answer 1

У меня пока не было успеха с наличием фиксированной строки заголовка над столбцами, чтобы выступать в качестве типичной строки заголовка таблицы, но с точки зрения фактического получения столбцов там я ссылался на this feature request on Github, где пользователь trebuchetty ссылается на использование загрузочного бутстрапа стили сетки, такие как col-md-6 (версии бутстрапа> = 3).

Я попытался следующие в опциях ВЫБ.2 и, кажется, дают хорошие результаты:

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

результат в приведенном выше является ссылка на элемент в массиве элементов, отображаемых в выпадающем списке

Answer 2

см это может полезно, здесь компонент, чтобы сделать столбцы в выбор2 как структура https://github.com/suriyagp/Grid-Select

Answer 3

formatresult не работал для меня! Но templateResult прекрасно работает как это с формой данных PHP в HTML сгенерированный (не ajax контент).

Вот woorking код для меня, я разделите мои столбцы с помощью полукокса трубы (мы могли бы иметь более 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; 
    } 
}); 

Answer 4

Если вы используете 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>

Answer 5

Мой пример (на основе ответа Meloman в) может, возможно, помочь кому-то еще:

// 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]; 
    } 
});