Hiển thị nhiều cột trong Select2

Question

Tôi đang sử dụng select2 và tôi muốn hiển thị bảng đa ngôn ngữ làm bảng thả xuống, vì vậy tôi cần chiều rộng của vùng chứa thả xuống để có chiều rộng khác (lớn hơn) so với chính đầu vào

Có thể thực hiện điều đó không?

hơn nữa tôi muốn hiển thị một bảng có nhiều cột. Từ ví dụ phim, tôi thấy rằng trong hàm formatResult bạn tạo một bảng mới cho mỗi hàng.

Có thể bao gồm mọi hàng trong cùng một bảng để mọi ô có cùng độ rộng không? Tôi sẽ cần phải thiết lập một số mẫu để chứa các hàng hoặc một cái gì đó như thế.

Những gì tôi muốn đạt được là một đầu vào nhỏ để hiển thị mã của một tổ chức nào, và một danh sách lí lớn để hiển thị nhiều cột hơn

-

đây là một vấn đề có liên quan trên github: https://github.com/ivaynberg/select2/issues/1314

Answer 1

Tôi chưa có bất kỳ thành công nào với việc có hàng tiêu đề cố định phía trên các cột để hoạt động như một hàng tiêu đề bảng điển hình, nhưng về mặt thực sự nhận được các cột ở đó, tôi đã gọi this feature request on Github nơi người dùng trebuchetty có ý định sử dụng bootstrap kiểu lưới như col-md-6 (phiên bản bootstrap> = 3).

Tôi đã thử các sau đây trong các tùy chọn Select2 và có vẻ như để cho kết quả tốt:

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

kết quả ở trên là một tham chiếu đến một phần tử trong mảng các mục hiển thị trong danh sách thả xuống

Answer 2

tham khảo này có thể hữu ích, đây là một thành phần để làm cho cột trong Select2 như cấu trúc https://github.com/suriyagp/Grid-Select

Answer 3

formatresult không hoạt động đối với tôi! Nhưng mẫuResult hoạt động tốt như thế này với biểu mẫu dữ liệu PHP trong HTML được tạo (không phải nội dung ajax).

Dưới đây là woorking mã cho tôi, tôi tách cột của tôi bằng một char ống (chúng ta có thể có nhiều hơn 2 cột):

html (từ 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

Nếu bạn sử dụng Select2 v3.5, đây là một cách giải quyết:

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

dụ của tôi (dựa trên câu trả lời của Meloman) có lẽ có thể giúp người khác:

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