4

我使用 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})
});

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

4

3 回答 3

4

使用 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 服务一起使用。

于 2016-07-23T23:17:46.803 回答
0 
                    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();
                    },
于 2017-08-28T19:25:22.673 回答
0

每当涉及过滤时，都会调用控制器的函数 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

于 2019-08-27T13:32:07.980 回答