Laden js-Grid dann Filtern von Daten

Question

Ich habe Daten aus einer DB mit PHP abgerufen und dann in Javascript übergeben, um js-Grid zu laden. Ich habe auch eine Dropdown-Liste mit PHP gefüllt, die den vom Benutzer ausgewählten und gespeicherten Standardwert enthält. Mein Ziel ist es, das Gitter mit allen zurückgegebenen Daten zu füllen und es dann basierend auf der ausgewählten Option im Dropdown-Menü zu filtern.

Ich kann nicht scheinen zu verstehen, wie man dann Daten mit js-Grid zu filtern.

<script type="text/javascript">var order_json = <?= $order_json ?>; var user_list = <?= $user_list['activeListId'] ?>;</script> 
<script type="text/javascript" src="js/main.js"></script> 

main.js

$(document).ready(function() { 
$("#jsGrid").jsGrid({ 
    width: "100%", 
    height: "400px", 

    inserting: false, 
    editing: false, 
    sorting: true, 
    paging: false, 
    pageSize: 30, 

    noDataContent: "No orders found", 

    data: order_json, 

    fields: [ 
     { name: "OrderId", type: "number", title: "Order ID", visible: false }, 
     { name: "ListId", type: "number", title: "Order List ID", visible: true}, 
     { name: "Name", type: "text", title: "Order Name", align: "left"} 
    ], 
}); 
var grid = $("#jsGrid").data("JSGrid"); 
    grid.search({ListId: user_list}) 
}); 

Ich habe einige verschiedene Ansätze ausprobiert und keine gearbeitet haben. Jede Hilfe wäre willkommen.

Answer 1

Mit js-grid sollte die eigentliche Filterung der Daten vom Entwickler durchgeführt werden. Die Filterung kann auf der Clientseite oder der Serverseite erfolgen. Client-seitige Filterung in loadData Methode des Controllers implementiert. Die serverseitige Filterung erfolgt über ein Serverskript, das Filterparameter empfängt und sie zum Abrufen von Daten verwendet.

Hier ist, wie Sie Ihre controller.loadData Methode aussehen könnte:

loadData: function(filter) { 
    var d = $.Deferred(); 

    // server-side filtering 
    $.ajax({ 
     type: "GET", 
     url: "/items", 
     data: filter, 
     dataType: "json" 
    }).done(function(result) { 
     // client-side filtering 
     result = $.grep(result, function(item) { 
      return item.SomeField === filter.SomeField; 
     }); 

     d.resolve(result); 
    }) 

    return d.promise(); 
} 

Was data Option, es ist nur für statische Rasterdaten verwendet.

Erwähnenswert ist, dass es besser wäre, Daten mit einem REST-y-Service ins Grid zu stellen (natürlich kann dies mit PHP gemacht werden). Hier ist das Beispielprojekt, das zeigt, wie man js-grid mit einem REST-Service auf PHP https://github.com/tabalinas/jsgrid-php verwendet.

Answer 2

    loadData: function (filter) { 
         criteria = filter; 
         var data = $.Deferred(); 
         $.ajax({ 
          type: "GET", 
          contentType: "application/json; charset=utf-8", 
          url: "/api/advertisements", 
          dataType: "json" 
          }).done(function(response){ 
           var res = []; 
           if(criteria.Title !== "") 
           { 
            response.forEach(function(element) { 
             if(element.Title.indexOf(criteria.Title) > -1){ 
              res.push(element); 
              response = res; 
             } 
            }, this); 
           } 
           else res = response; 
           if(criteria.Content !== "") 
           { 
            res= []; 
            response.forEach(function(element) { 
             if(element.Content.indexOf(criteria.Content) > -1) 
              res.push(element); 
            }, this); 
           } 
           else res = response;          

           data.resolve(res); 
          }); 
         return data.promise(); 
        },