Auf GitHub anzeigen

Bootstrap Table Filter Control

Die Filter-Control-Erweiterung der Bootstrap Table.

Auf dieser Seite

Verwendung

<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>

Beispiel

Filter Control

Optionen

filterControl

  • Attribut: data-filter-control

  • Typ: Boolean

  • Detail:

    Setzen Sie auf true, um ein input oder select in die Spalte hinzuzufügen.

  • Standard: false

filterControlVisible

  • Attribut: data-filter-control-visible

  • Typ: Boolean

  • Detail:

    Setzen Sie auf false, um die Filtersteuerungen auszublenden.

  • Standard: true

alignmentSelectControlOptions

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

  • Typ: String

  • Detail:

    Legen Sie die Ausrichtung der Select-Steuerungsoptionen fest. Verwenden Sie left, right oder auto.

  • Standard: undefined

filterControlContainer

  • Attribut: data-filter-control-container

  • Typ: Selector

  • Detail:

    Setzen Sie z. B. auf #filter, um eine benutzerdefinierte Eingabefilter in einem Element mit der ID filter zu ermöglichen. Jedes Filterelement (input oder select) muss die folgende Klasse haben: bootstrap-table-filter-control-<FieldName> (<FieldName> muss durch den definierten Field-Namen ersetzt werden).

  • Standard: false

filterDataCollector

  • Attribut: data-filter-data-collector

  • Typ: Function

  • Detail:

    Sammelt Daten, die zum Select-Filter hinzugefügt werden, um z. B. durch Komma getrennte Labels zu filtern, die mit einem Formatter angezeigt werden.

  • Standard: undefined

filterControlMultipleSearch

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

  • Typ: bool

  • Detail:

    Setzen Sie auf true, um das Suchen nach mehreren Werten gleichzeitig zu ermöglichen. Die Werte werden durch ein Trennzeichen getrennt, siehe Option filterControlMultipleSearchDelimiter.

  • Standard: false

filterControlMultipleSearchDelimiter

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

  • Typ: String

  • Detail:

    Definiert das Trennzeichen, das verwendet wird, um die Suchwerte in der Option filterControlMultipleSearchDelimiter zu trennen.

  • Standard: ,

filterControlSearchClear

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

  • Typ: bool

  • Detail:

    Setzen Sie auf true, um die Filtersteuerungsfilter mit der Tabellenoption showSearchButton zu löschen.

  • Standard: true

searchOnEnterKey

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

  • Typ: Boolean

  • Detail:

    Setzen Sie auf true, um die Suchaktion auszulösen, wenn der Benutzer die Enter-Taste drückt.

  • Standard: false

showFilterControlSwitch

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

  • Typ: Boolean

  • Detail:

    Setzen Sie auf true, um den Filtersteuerungs-Umschaltknopf anzuzeigen.

  • Standard: false

sortSelectOptions

  • Attribut: data-sort-select-options

  • Typ: Boolean

  • Detail:

    Setzen Sie auf true, um die Optionselemente der Select-Steuerung zu sortieren.

  • Standard: false

Spaltenoptionen

filterControl

  • Attribut: data-filter-control

  • Typ: String

  • Detail:

    Setzen Sie input: zeigt eine Eingabesteuerung an, select: zeigt eine Select-Steuerung an, datepicker: zeigt eine HTML5-Datepicker-Steuerung an.

  • Standard: undefined

filterControlPlaceholder

  • Attribut: data-filter-control-placeholder

  • Typ: String

  • Detail:

    Setzen Sie dies, um nur in der Eingabefiltersteuerung einen Platzhalter anzuzeigen.

  • Standard: ''

filterCustomSearch

  • Attribut: data-filter-custom-search

  • Typ: function

  • Detail:

    Die benutzerdefinierte Suchfunktion wird anstatt der eingebauten Suchfunktion ausgeführt und nimmt vier Parameter entgegen:

    • text: der Suchtext.
    • value: der Wert der Spalte zum Vergleichen.
    • field: der Spaltenfeldname.
    • data: die Tabellendaten.

    Geben Sie false zurück, um die aktuelle Spalte/Zeile auszufiltern. Geben Sie true zurück, um die aktuelle Spalte/Zeile nicht auszufiltern. Geben Sie null zurück, um die benutzerdefinierte Suche für den aktuellen Wert zu überspringen.

  • Standard: undefined

filterData

  • Attribut: data-filter-data

  • Typ: String

  • Detail:

    Legen Sie benutzerdefinierte Select-Filterwerte fest, verwenden Sie var:variable zum Laden von einer Variable obj:variable.key zum Laden von einem Objekt url:http://www.example.com/data.json zum Laden von einer Remote-JSON-Datei json:{key:data} zum Laden von einem JSON-String. func:functionName zum Laden von einer Funktion.

  • Standard: undefined

filterDatepickerOptions

  • Attribut: data-filter-datepicker-options

  • Typ: Object

  • Detail:

    Wenn die Datepicker-Option gesetzt ist, verwenden Sie diese Option, um den Datepicker mit den nativen Optionen zu konfigurieren. Verwenden Sie dies so: data-filter-datepicker-options='{"max":value1, "min": value2, "step": value3}'. Weitere Informationen finden Sie in dieser Dokumentation

  • Standard: undefined

filterDefault

  • Attribut: data-filter-default

  • Typ: String

  • Detail:

    Legen Sie den Standardwert des Filters fest.

  • Standard: undefined

filterOrderBy

  • Attribut: data-filter-order-by

  • Typ: String

  • Detail:

    Setzen Sie dies, um die Optionen in einer Select-Steuerung zu ordnen, entweder aufsteigend ('asc'), absteigend ('desc') oder in der vom Server bereitgestellten Reihenfolge ('server').

  • Standard: 'asc'

filterStartsWithSearch

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

  • Typ: Boolean

  • Detail:

    Setzen Sie auf true, wenn Sie den Starts-with-Suchmodus verwenden möchten.

  • Standard: false

filterStrictSearch

  • Attribut: data-filter-strict-search

  • Typ: Boolean

  • Detail:

    Setzen Sie auf true, wenn Sie den strikten Suchmodus verwenden möchten.

  • Standard: false

Icons

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

Events

onColumnSearch(column-search.bs.table)

  • Wird ausgelöst, wenn wir in die Spaltendaten suchen

onCreatedControls(created-controls.bs.table)

  • Wird ausgelöst, wenn wir in die Spaltendaten suchen

Methoden

triggerSearch

  • Löst manuell die Suchaktion aus

clearFilterControl

  • Löscht alle durch dieses Plugin hinzugefügten Steuerelemente (ähnlich wie die Option showSearchClearButton).

toggleFilterControl

  • Schaltet die Sichtbarkeit (anzeigen/ausblenden) der Filtersteuerungen um.

Lokalisierungen

formatClearFilters

  • Typ: Function

  • Standard: function () { return "Clear Filters" }

formatFilterControlSwitch

  • Typ: Function

  • Standard: function () { return "Hide/Show controls" }

formatFilterControlSwitchHide

  • Typ: Function

  • Standard: function () { return "Hide controls" }

formatFilterControlSwitchShow

  • Typ: Function

  • Standard: function () { return "Show controls" }