Kendo UI Grid-Suche als Typ B.

Möchte ich Suche datagrid in Kendo UI während der Eingabe ins input-Feld über das Netz.

Wie kann ich es tun?

Vielen Dank für jeden Rat.

Hier ist zum Beispiel Spalten:

   $("#grid").kendoGrid({
            dataSource: dataPacket,
            filterable: true,
            pageSize: 10,
            pageable: true,
            sortable: true,
            reorderable: true,
            resizable: true,
            columnMenu: true,
            height: 550,
            toolbar: ["create", "save", "cancel"],
            columns: ["id", 
                      "username", 
                      "name",
                      "surname", 
                      "email", 
                      {
                          field :"created", 
                          title : "Created at",
                          format: "{0:M/d/yyyy}",
                          parseFormats: ["dd-MM-yyyy"],
                          type: "date"
                      },
  • Wir brauchen mehr hintergrund-Informationen. Spalten und Felder mindestens, und DataSource-Konfiguration nützlich sein könnten.
  • Ich möchte die Suche in den ganzen Datensatz ausgefüllt von API im lese-Ereignis.
  • Wenn du mir mindestens die Spalten kann ich Ihnen ein Beispiel geben. Ansonsten gebe ich dir nur pseudo-code. Was tun Sie lieber?
  • Ich habe einige Beispiel-Frage
InformationsquelleAutor redrom | 2014-06-17
  1. 5

    Kendo machen diese Sache wirklich einfach für Sie, was nötig ist, um einen filter zu erstellen und übergeben es an die Datenquelle.
    http://docs.telerik.com/kendo-ui/api/framework/datasource#methods-filter

    Jedoch, dieses problem muß geteilt werden in zwei unterschiedliche Aufgaben:

    a) Erfassen der wichtigsten Ereignisse in das Suchfeld ein, Gas Sie es und starten Sie die Suche nach der "operation".

    b) Bauen Sie einen filter ein und übergeben es an die DataSource.

    Also für die Drosselung der Tastatur-Ereignisse, wir brauchen einen timeout. Oder verwenden Sie die Drossel-Funktion von underscorejs. Warum? Wir wollen nicht der Auslöser einer search-operation auf jede Taste zu drücken. Nur 250 Millisekunden (dieser Wert ist bis zu Ihnen) nach dem letzten Tastendruck.

    Hier ist Ihr Beispiel-HTML

    <input type="text" id="search" />

    Hier ist das Beispielskript. Ich wickle alles als eine sich selbst aufrufende Funktion, wie Sie nicht wollen, erstellen Sie ein Chaos Globale Variablen zu deklarieren.

    (function($, kendo){

    //ID of the timeout "timer" created in the last key-press
    var timeout = 0;

    //Our search function 
    var performSearch = function(){

        //Our filter, an empty array mean "no filter"
        var filter = [];

        //Get the DataSource
        var dataSource = $('#grid').data('kendoGrid').dataSource;

        //Get and clean the search text.
        var searchText = $.trim($('#search').val());

        //Build the filter in case the user actually enter some text in the search field
        if(searchText){

            //In this case I wanna make a multiple column search so the filter that I want to apply will be an array of filters, with an OR logic. 
            filter.push({
                logic: 'or',
                filters:[
                    { field: 'username', operator: 'contains', value: searchText },
                    { field: 'name', operator: 'contains', value: searchText },
                    { field: 'surname', operator: 'contains', value: searchText },
                    { field: 'email', operator: 'contains', value: searchText }
                ]                  
            });               
        }

        //Apply the filter.
        dataSource.filter(filter); 
    };

    //Bind all the keyboard events that we wanna listen to the search field.
    $('#search').on('keyup, keypress, change, blur', function(){

          clearTimeout(timeout);
          timeout = setTimeout(performSearch, 250);
    });

})(window.jQuery, window.kendo);

    Bottom-line: Stellen Sie sicher, dass Sie die richtige DataSource-Konfiguration.

    Wenn Sie konfiguriert serverFiltering = true, diese Filterlogik wird ein Teil Ihrer Ajax-request, so wird Ihr server zu deuten und führen Sie die Filterung auf server-Seite.

    In Fall, dass Sie konfiguriert serverFiltering = false alle diese Filter-Logik ausgewertet werden, auf der client-Seite mit JavaScript (verdammt schnell!). Und in diesem Fall, die schema (was Daten-Typ erwartet wird, in jeder Spalte) muss auch gut konfiguriert.

    • Danke, ich dachte, dass Kendo hat einige build-in-Funktion, um dies zu tun lik-e, die einige andere DataGrid-widgets. Ich versuche, es zu tun auf diese Weise.
    • in diesem Fall müssen Sie einige einfachere Lösung verwenden, können Sie die Spalte-Menü "filter" - Funktion. docs.telerik.com/kendo-ui/documentation/api/web/... es wird Ihnen eine Art von Filterfunktion pro-Spalte. Es ist ziemlich hässlich, aber bekommt den job getan.
    • Vielen Dank für deinen code. Ich fand, dass $('#Suche').auf('keyup.. funktioniert nicht unter scope-Funktion in Angular JS, könnten Sie bitte geben Sie Beispiel für Angular JS?
    InformationsquelleAutor Adrian Salazar
Schreibe einen Kommentar