Bootstrap-Tabelle filter-control-Erweiterung Auffüllen wählen Sie mit der vollständigen Liste der Optionen

Ich bin mit bootstrap-Tabelle für die Arbeit mit Daten aus meiner Datenbank.

Ich die Paginierung features und nur senden Sie zurück auf die Anzahl der Zeilen, die vom Benutzer gewünscht mit dem limit und offset-Optionen.

Ich bin auch mit dem table-control-Erweiterung ermöglicht die einfache Filterung der Ergebnisse. Allerdings, wenn ich eine der select-Steuerelement für die Filterung mit Daten-filter-control="Auswahl" die Einträge sind nur diejenigen, die innerhalb zurückgegeben, die Ergebnisse.

Als ich apply andere Filter die Liste wird wachsen. Ich möchte die API zu verwenden und haben es Vorspannung eine Liste aller möglichen Elemente aus dem server für die Liste, um für die Filterung über die Optionen.

Ich kann zwar senden die Ergebnisse zurück, die mit jedem gefilterten Ergebnisse, die vielleicht in einem separaten element des JSON, wäre es wahrscheinlich am besten laden Sie diese Liste, nachdem das Steuerelement selbst lädt, da ich nicht ständig benötigen, senden Sie die Daten an die Steuerung mit jedem filter.

Ist das möglich? Kann ich die API verwenden, um die Vorspannung dieser Liste mit einer Reihe von Werten?

Es gibt ein Problem auf github scheint zu beschreiben, ein ähnliches Problem, was ich habe https://github.com/wenzhixin/bootstrap-table/issues/904 und Hinweis zu einem patch, aber ich bin mir nicht sicher, wie Sie Sie umzusetzen.

Ich bin mit bootstrap 3.3.4 aus maxcdn.bootstrapcdn.com und ich bin mit bootstrap-Tabelle 1.8.1 über cdnjs.cloudflare.com

Bearbeiten:
Ich dachte, diese nach mit FireBug zu Schritt durch den code Zeile für Zeile, um herauszufinden, ob ich dies tun könnte.

Gibt es zwei Optionen für die Bereitstellung von Daten für den filter. Fügen Sie das Attribut data-filter-Daten in die . Nutzen Sie ein "var" oder "url" - option gefolgt von einem Unterstrich (oder ein anderes Zeichen, dass wird verworfen) und dann im Falle des "var" übergeben Sie ein Objekt, name, meins sieht aus wie diese Daten-filter-data="var_OnlineValues" und utlizes mein Objekt var OnlineValues = { "": "", "Started" : "Begannen", "Eingereicht" : "Eingereicht" }. Ich habe auch einige Daten auf dem server, bin ich wieder als JSON. Daten-filter-data="url_filename.php" und das zurückgegebene Objekt ist ein Schlüssel/Wert-paar.

Ich hoffe, das hilft.

InformationsquelleAutor Daniel M | 2015-06-15

Nutzung
Hinzufügen data-filter-data Attribut der Spalte.

Beispiel:

<script>
var payment_methods = {
  "PP": "PayPal - PP",
  "CC": "PayPal - CC"
};
</script>

<th data-field="payment_method" data-sortable="true" data-filter-control="select" data-filter-data="var:payment_methods">Payment Method</th>

Gibt es kein Dokument für die filterData option, so hatte ich, den code zu Lesen. Ich zitierte den entsprechenden Teil unten. Es ist substring(0,3) und der gültige Wert ist url oder var. Das nächste Zeichen wird ignoriert.

Wenn der Typ url macht es den ajax-Aufruf füllen Sie das Antwort-JSON-in den Optionen auszuwählen. Die Struktur ist einfach {key:value}.

Wenn der Typ var sieht es aus window[filterDataSource] was ist die Globale variable angegeben, die von der option. Die Datenstruktur ist einfach {key:value} Objekt.

    if (column.filterData !== undefined && column.filterData.toLowerCase() !== 'column') {
        var filterDataType = column.filterData.substring(0, 3);
        var filterDataSource = column.filterData.substring(4, column.filterData.length);
        var selectControl = $('.' + column.field);
        addOptionToSelectControl(selectControl, '', '');

        switch (filterDataType) {
            case 'url':
                $.ajax({
                    url: filterDataSource,
                    dataType: 'json',
                    success: function (data) {
                        $.each(data, function (key, value) {
                            addOptionToSelectControl(selectControl, key, value);
                        });
                    }
                });
                break;
            case 'var':
                var variableValues = window[filterDataSource];
                for (var key in variableValues) {
                    addOptionToSelectControl(selectControl, key, variableValues[key]);
                }
                break;
        }
    }

Wirklich gut gemacht. Es funktioniert perfekt. (die var Teil nur getestet)

InformationsquelleAutor Kenji Noguchi

Brauchen Sie nicht zu ändern bootstrap-Tabelle, um diese Arbeit zu machen. Es ist ein Weg, um Standard Werte zu setzen, um die dropdown-wählen Sie mithilfe der data-filter-data - Eigenschaft der Spalten. versuchen Sie, die folgenden:

den Kopf:

<head>
    //... included scripts go here also
    <script>
        var filterDefaults = {
            somekey: 'some string value',
            anotherkey: 'another value'
        };
    </script>
</head>

fügen Sie dann data-filter-data:'var:filterDefaults' auf die Spalte:

<table id="table"
      data-toggle="table"
      data-filter-control="true">
     <thead>
         <tr>
             <th data-field="id">ID</th>
             <th data-field="name" data-filter-control="input">Item Name</th>
             <th data-field="price" data-filter-control="select" data-filter-data="var:filterDefaults">Item Price</th>
         </tr>
     </thead>
</table>

InformationsquelleAutor Io Ctaptceb

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.