javascript - 加载js-grid然后过滤数据

Question

我使用 php 从数据库中提取数据，然后传递到 javascript 以加载 js-grid。我还有一个由 php 填充的下拉列表，其中包含用户选择和存储的默认值。我的目标是用返回的所有数据填充网格，然后根据下拉列表中的选定选项对其进行过滤。

我似乎无法理解如何使用 js-grid 加载然后过滤数据。

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

主要.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})
});

我尝试了一些不同的方法，但都没有奏效。任何帮助，将不胜感激。

Answer 1

对于 js-grid，实际的数据过滤应该由开发人员来实现。过滤可以在客户端或服务器端完成。客户端过滤在 Controller 的 loadData 方法中实现。服务器端过滤由接收过滤参数并使用它们检索数据的服务器脚本完成。

这是您的 controller.loadData 方法的样子:

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();
}

至于data选项，它只用于静态网格数据。

值得一提的是，最好用REST-y服务向网格提供数据(当然用PHP也可以)。这是示例项目，展示了如何在 PHP 上将 js-grid 与 REST 服务结合使用 https://github.com/tabalinas/jsgrid-php .