jquery-bootgrid: come gestire la larghezza delle colonne - SMsoft

jquery-bootgrid è un buon sostituto per datatables.net per la gestione delle tabelle con contenuti da caricare tramite ajax, senza dover ricaricare la pagina.

Sicuramente non offre tutte le caratteristiche del più famoso che ho già citato, ma è molto leggero e fa quello per cui è stato scritto.

Oggi non vi parlo di come implemetarlo (ci sono delle demo nel sito ufficiale), ma di come gestirne alcune caratteristiche, non ben documentate.

Ad esempio, è possibile gestire la larghezza delle varie colonne, associando le classiche classi di bootstrap, ma la documentazione non offre una guida adeguata.

Veniamo al sodo. Per gestire la larghezza di una colonna, si può usare l’attributo data-header-css-class con la classe relativa alla larghezza (es col-sm-2).

Questo un esempio:

<table id="grid-data" class="table table-condensed table-hover table-striped">
    <thead>
      <tr>
        <th data-column-id="tots">Totali nel DB</th>
        <th data-column-id="remains">Da aggiornare</th>
        <th data-column-id="errors">Errori nel DB</th>
        <th data-column-id="rows">Rows Tot/Add/Upd/Err</th>
        <th data-column-id="tempo">Tempo</th>
        <th data-column-id="ts" data-visible="false" >Ts</th>
        <th data-column-id="tsi" data-header-css-class="col-sm-2" data-order="desc">TS</th>
      </tr>
    </thead>
  </table>

<thead>

<tr>

<th data-column-id="tots">Totali nel DB</th>

<th data-column-id="remains">Da aggiornare</th>

<th data-column-id="errors">Errori nel DB</th>

<th data-column-id="tempo">Tempo</th>

</tr>

</thead>

</table>

In questo esempio, la colonna tsi avrà larghezza col-sm-2.

Ricapitolando, a differenza di quanto scritto nella documentazione, il nome degli attributi non è nel formato:

data-camelCase=

1	data-camelCase=

bensì nel formato:

data-camel-case=

1	data-camel-case=

Questi alcuni tra gli attributi più utili:

    data-column-id // non data-id come indica la documentazione
    data-identifier
    data-converter
    data-header-align // [sic], data-headerAlign fallisce in JQuery 1.5+
    data-css-class // come sopra
    data-header-css-class // come sopra
    data-formatter
    data-order
    data-searchable
    data-sortable
    data-visible
    data-visible-in-selection // come sopra
    data-width

data-column-id// non data-id come indica la documentazione

data-identifier

data-converter

data-header-align// [sic], data-headerAlign fallisce in JQuery 1.5+

data-css-class// come sopra

data-header-css-class// come sopra

data-formatter

data-order

data-searchable

data-sortable

data-visible

data-visible-in-selection// come sopra

data-width

enjoy!

(fonte)

Ti interessa acquistare un dominio a prezzi ultraconvenienti? clicca qui

Se hai trovato utili le informazioni su questo blog,
Fai una donazione!
Clicca sul bottone qui sotto o almeno clicca sul banner pubblicitario 🙂

Commenta