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

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

我尝试了一些不同的方法并且 none 奏效了。任何帮助，将不胜感激。

Answer 1

对于 js-grid，实际的数据过滤应该由开发人员来实现。过滤可以在客户端或服务器端完成。在控制器的 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 https://github.com/tabalinas/jsgrid-php.

上将 js-grid 与 REST 服务一起使用

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

Answer 3

只要涉及过滤，就会调用控制器的 loadData 函数。在那里你可以实现你想要的过滤功能。

这是一个通用过滤器的示例，它检查您在过滤器行中键入的字符串是否包含在相应的行中，也适用于数字和其他类型

loadData: function (filter) {
    return $.get('your.url.here')
        .then(result => result.filter(row => Object.keys(filter).every(col => 
            filter[col] === undefined
            || ('' + filter[col]).trim() === ''
            || ('' + row[col]).toLowerCase().includes(('' + filter[col]).trim().toLowerCase())
        )))
}

如果您不是从服务器获取数据，您仍然可以按照此处所述使用 loadData 函数：https://github.com/tabalinas/jsgrid/issues/759

如果您想手动调用过滤，您可以使用文档中描述的搜索功能：http://js-grid.com/docs/#searchfilter-promise

加载js-grid然后过滤数据

Loading js-grid then filtering data

javascript

php

jquery

jsgrid