Anzeige mehrere Spalten in Select2

Question

Ich benutze select2 und ich würde gerne eine multicolum-Tabelle als Dropdown-Liste, so dass ich die Breite des Dropdown-Container eine andere (größere) Breite als die Eingabe selbst haben muss

Ist es möglich, das zu tun?

außerdem möchte ich eine Tabelle mit mehreren Spalten zeigen. Aus dem Filmbeispiel habe ich gesehen, dass Sie in der formatResult-Funktion eine neue Tabelle für jede Zeile erstellen.

Wäre es möglich, jede Zeile in dieselbe Tabelle aufzunehmen, so dass jede Zelle die gleiche Breite hat? Ich müsste eine Vorlage erstellen, um die Zeilen oder ähnliches zu enthalten.

Was ich erreichen will ist ein kleiner Eingang den Code eines Unternehmens zu zeigen, und eine große Auswahl mehr Spalten zu zeigen

-

hier ein ähnliches Problem auf GitHub: https://github.com/ivaynberg/select2/issues/1314

Answer 1

Ich hatte noch keinen Erfolg mit einer festen Kopfzeile über den Spalten, um als eine typische Tabellenkopfzeile zu fungieren, aber in Bezug auf die tatsächlichen Spalten dort heraus, ich bezog mich auf this feature request on Github, wo Benutzer trebuchetty auf die Verwendung von Bootstraps anspielt Grid-Stile wie col-md-6 (Bootstrap-Versionen> = 3).

habe ich versucht, die folgend in den select2 Optionen und es scheint, um gute Ergebnisse zu geben:

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

Ergebnis in der oben ist ein Verweis auf ein Element in der Anordnung der Elemente in der Dropdown-Liste angezeigt

Answer 2

beziehen sich diese es hilfreich sein, hier eine Komponente Spalten in select2 artige Struktur zu machen https://github.com/suriyagp/Grid-Select

Answer 3

formatresult hat nicht für mich gearbeitet! Aber templateResult funktioniert gut so mit Datenform PHP in HTML generiert (nicht Ajax Inhalt).

Hier ist woorking Code für mich, ich trennen meine Spalten durch ein Pipezeichen (wir könnten mehr als 2 Spalten):

html (von 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

Wenn Sie Select2 v3 verwenden.5, hier eine Abhilfe:

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

Mein Beispiel (basierend auf Meloman Antwort) kann vielleicht jemand helfen anderes:

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