Vedi su GitHub

Bootstrap Table Filter Control

Estensione Filter Control per Bootstrap Table.

In questa pagina

Utilizzo

<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>

Esempio

Filter Control

Opzioni

filterControl

  • Attributo: data-filter-control

  • Tipo: Boolean

  • Dettagli:

    Imposta su true per aggiungere un input o select nella colonna.

  • Default: false

filterControlVisible

  • Attributo: data-filter-control-visible

  • Tipo: Boolean

  • Dettagli:

    Imposta su false per nascondere i controlli di filtro.

  • Default: true

alignmentSelectControlOptions

  • Attributo: data-alignment-select-control-options

  • Tipo: String

  • Dettagli:

    Imposta l’allineamento delle opzioni del controllo select. Utilizza left (sinistra), right (destra) o auto (automatico).

  • Default: undefined

filterControlContainer

  • Attributo: data-filter-control-container

  • Tipo: Selector

  • Dettagli:

    Imposta ad esempio #filter per consentire un filtro di input personalizzato in un elemento con l’id filter. Ogni elemento di filtro (input o select) deve avere la seguente classe bootstrap-table-filter-control-<FieldName> (<FieldName> deve essere sostituito con il nome del Field definito).

  • Default: false

filterDataCollector

  • Attributo: data-filter-data-collector

  • Tipo: Function

  • Dettagli:

    Raccoglie i dati che verranno aggiunti al filtro select, per filtrare ad esempio etichette separate da virgola e visualizzate con un formatter.

  • Default: undefined

filterControlMultipleSearch

  • Attributo: data-filter-control-multiple-search

  • Tipo: bool

  • Dettagli:

    Imposta su true per consentire la ricerca di più valori contemporaneamente. I valori saranno suddivisi da un delimitatore, vedi opzione filterControlMultipleSearchDelimiter.

  • Default: false

filterControlMultipleSearchDelimiter

  • Attributo: data-filter-control-multiple-search-delimiter

  • Tipo: String

  • Dettagli:

    Definisce il delimitatore che verrà utilizzato per suddividere i valori di ricerca nell’opzione filterControlMultipleSearchDelimiter.

  • Default: ,

filterControlSearchClear

  • Attributo: data-filter-control-search-clear

  • Tipo: bool

  • Dettagli:

    Imposta su true per cancellare i filtri dei controlli di filtro utilizzando l’opzione della tabella showSearchButton.

  • Default: true

searchOnEnterKey

  • Attributo: data-search-on-enter-key

  • Tipo: Boolean

  • Dettagli:

    Imposta su true per attivare l’azione di ricerca quando l’utente preme il tasto invio.

  • Default: false

showFilterControlSwitch

  • Attributo: data-show-filter-control-switch

  • Tipo: Boolean

  • Dettagli:

    Imposta su true per mostrare il pulsante di commutazione dei controlli di filtro.

  • Default: false

sortSelectOptions

  • Attributo: data-sort-select-options

  • Tipo: Boolean

  • Dettagli:

    Imposta su true per ordinare gli elementi delle opzioni del controllo select.

  • Default: false

Opzioni della colonna

filterControl

  • Attributo: data-filter-control

  • Tipo: String

  • Dettagli:

    Imposta input: mostra un controllo di input, select: mostra un controllo select, datepicker: mostra un controllo datepicker html5.

  • Default: undefined

filterControlPlaceholder

  • Attributo: data-filter-control-placeholder

  • Tipo: String

  • Dettagli:

    Imposta questo per mostrare un placeholder solo nel controllo di filtro input.

  • Default: ''

filterCustomSearch

  • Attributo: data-filter-custom-search

  • Tipo: function

  • Dettagli:

    La funzione di ricerca personalizzata viene eseguita invece della funzione di ricerca incorporata e accetta quattro parametri:

    • text: il testo di ricerca.
    • value: il valore della colonna da confrontare.
    • field: il nome del campo della colonna.
    • data: i dati della tabella.

    Restituisci false per filtrare la colonna/riga corrente. Restituisci true per non filtrare la colonna/riga corrente. Restituisci null per saltare la ricerca personalizzata per il valore corrente.

  • Default: undefined

filterData

  • Attributo: data-filter-data

  • Tipo: String

  • Dettagli:

    Imposta valori personalizzati per il filtro select, utilizza var:variable per caricare da una variabile obj:variable.key per caricare da un oggetto url:http://www.example.com/data.json per caricare da un file JSON remoto json:{key:data} per caricare da una stringa JSON. func:functionName per caricare da una funzione.

  • Default: undefined

filterDatepickerOptions

  • Attributo: data-filter-datepicker-options

  • Tipo: Object

  • Dettagli:

    Se l’opzione datepicker è impostata, utilizza questa opzione per configurare il datepicker con le opzioni native. Utilizza questo modo: data-filter-datepicker-options='{"max":value1, "min": value2, "step": value3}'. Per ulteriori informazioni visita questa documentazione

  • Default: undefined

filterDefault

  • Attributo: data-filter-default

  • Tipo: String

  • Dettagli:

    Imposta il valore predefinito del filtro.

  • Default: undefined

filterOrderBy

  • Attributo: data-filter-order-by

  • Tipo: String

  • Dettagli:

    Imposta questo per ordinare le opzioni in un controllo select in ordine crescente ('asc'), decrescente ('desc') o nell’ordine fornito dal server ('server').

  • Default: 'asc'

filterStartsWithSearch

  • Attributo: data-filter-starts-with-search

  • Tipo: Boolean

  • Dettagli:

    Imposta su true se desideri utilizzare la modalità di ricerca che inizia con.

  • Default: false

filterStrictSearch

  • Attributo: data-filter-strict-search

  • Tipo: Boolean

  • Dettagli:

    Imposta su true se desideri utilizzare la modalità di ricerca rigorosa.

  • Default: false

Icons

  • clear: 'glyphicon-trash icon-clear'
  • filterControlSwitchHide: 'glyphicon-zoom-out icon-zoom-out'
  • filterControlSwitchShow: 'glyphicon-zoom-in icon-zoom-in'

Eventi

onColumnSearch(column-search.bs.table)

  • Viene scatenato quando stiamo cercando nei dati della colonna

onCreatedControls(created-controls.bs.table)

  • Viene scatenato quando stiamo cercando nei dati della colonna

Metodi

triggerSearch

  • Trigger manualmente l’azione di ricerca

clearFilterControl

  • Cancella tutti i controlli aggiunti da questo plugin (simile all’opzione showSearchClearButton).

toggleFilterControl

  • Inverte la visibilità (mostra/nascondi) dei controlli di filtro.

Localizzazioni

formatClearFilters

  • Tipo: Function

  • Default: function () { return "Cancella filtri" }

formatFilterControlSwitch

  • Tipo: Function

  • Default: function () { return "Nascondi/Mostra controlli" }

formatFilterControlSwitchHide

  • Tipo: Function

  • Default: function () { return "Nascondi controlli" }

formatFilterControlSwitchShow

  • Tipo: Function

  • Default: function () { return "Mostra controlli" }