Visualizza più colonne in Select2

Question

Sto usando select2 e mi piacerebbe mostrare una tabella multicolore come un menu a discesa, quindi ho bisogno della larghezza del contenitore a discesa per avere una larghezza (più grande) diversa dall'input stesso

È possibile farlo?

inoltre mi piacerebbe mostrare una tabella con più colonne. Dall'esempio dei film, ho visto che nella funzione formatResult si crea una nuova tabella per ogni riga.

Sarebbe possibile includere ogni riga nella stessa tabella, in modo che ogni cella abbia la stessa larghezza? Avrei bisogno di impostare alcuni modelli per contenere le righe o qualcosa del genere.

Quello che voglio ottenere è un piccolo input per mostrare il codice di un'entità, e una grande discesa per mostrare alcune rubriche

-

qui è un problema correlato su GitHub: https://github.com/ivaynberg/select2/issues/1314

Answer 1

Non ho ancora avuto alcun successo con una riga di intestazione fissa sopra le colonne per fungere da riga di intestazione di tabella tipica, ma in termini di colonne effettivamente disponibili, ho fatto riferimento a this feature request on Github dove l'utente trebuchetty allude all'utilizzo di bootstrap stili di griglia come col-md-6 (versioni di bootstrap> = 3).

Ho provato quanto segue nelle opzioni Select2 e sembra dare buoni risultati:

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

risultato in quanto sopra è un riferimento ad un elemento della matrice di elementi visualizzati nella discesa

Answer 2

riferiscono questo può utile, qui un componente per rendere le colonne in select2 come la struttura https://github.com/suriyagp/Grid-Select

Answer 3

formatresult non ha funzionato per me! Ma templateResult funziona bene in questo modo con modulo dati in HTML generato (non contenuto ajax).

Qui è woorking codice per me, ho separato le mie colonne da un carattere pipe (potremmo avere più di 2 colonne):

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

Se si utilizza Select2 v3.5, ecco una soluzione:

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

Il mio esempio (in base alla risposta del Meloman) può forse aiutare qualcun altro:

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