BootGrid 示例 JSON 不起作用（带代码）答案

【问题标题】：BootGrid Example JSON doesnt work (with code)BootGrid 示例 JSON 不起作用（带代码）
【发布时间】：2017-03-08 23:40:19
【问题描述】：

我按照示例中的步骤操作，既不运行搜索也不运行按 id 或接收的排序。例子在网址Bootgrid Example JSON

在示例中它工作正常，但缺少一些东西

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery Bootgrid Demo</title>

        <!-- CSS -->
        <link href="css/bootstrap/bootstrap.css" rel="stylesheet" />
        <link href="css/bootgrid/jquery.bootgrid.css" rel="stylesheet" />
        <style>
            @-webkit-viewport { width: device-width; }
            @-moz-viewport { width: device-width; }
            @-ms-viewport { width: device-width; }
            @-o-viewport { width: device-width; }
            @viewport { width: device-width; }

            body { padding-top: 70px; }

            .column .text { color: #f00 !important; }
            .cell { font-weight: bold; }
            .pagination{cursor: pointer}
        </style>

        <!-- JS -->
        <script src="js/jquery/jquery-1.11.1.min.js"></script>
        <script src="js/bootstrap/bootstrap.js"></script>
        <script src="js/bootgrid/jquery.bootgrid.js"></script>
        <script>
            $( document ).ready(function()
            {
                var grid = $("#grid-data").bootgrid(
                {
                    ajax: true,
                    url: "data.json",
                    formatters:
                    {
                        "commands": function(column, row)
                        {
                            return "<button type=\"button\" class=\"btn btn-sm btn-primary command-edit\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> " + 
                                "<button type=\"button\" class=\"btn btn-sm btn-danger command-delete\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-trash\"></span></button>";
                        }
                    }
                }).on("loaded.rs.jquery.bootgrid", function ()
                {
                    /* Executes after data is loaded and rendered */
                    grid.find(".command-edit").on("click", function(e)
                    {
                        alert("You pressed edit on row: " + $(this).data("row-id"));
                    }).end().find(".command-delete").on("click", function(e)
                    {
                        alert("You pressed delete on row: " + $(this).data("row-id"));
                    });
                });
            });
        </script>
    </head>
    <body>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-9">
                    <!--div class="table-responsive"-->
                        <table id="grid-data" class="table table-condensed table-hover table-striped">
                            <thead>
                                <tr>
                                   <th data-column-id="id" data-type="numeric">ID</th>
            <th data-column-id="sender">Sender</th>
            <th data-column-id="received" data-order="desc">Received</th>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    <!--/div-->
                </div>
            </div>
        </div>
    </body>
</html>

data.json

{
  "current": 1,
  "rowCount": 10,
  "rows": [
    {
      "id": 19,
      "sender": "123@test.de",
      "received": "2014-05-30T22:15:00"
    },
    {
      "id": 14,
      "sender": "123@test.de",
      "received": "2014-05-30T20:15:00"
    }
    ]
}

【问题讨论】：

打开浏览器的控制台（例如 chrome 中的 F12，控制台选项卡）并检查是否有错误。如果有帮助，请参阅 this JSFiddle 示例。
你的例子运行正常，但是你放外部源json的时候，既不能过滤，也不能搜索

标签： javascript jquery html json jquery-bootgrid

【解决方案1】：

希望我的以下代码对您没问题，另一方面，如果我的代码不适用于您的环境，请告诉我。

<table id="grid" class="table table-condensed table-hover table-striped">
                            <thead>
                                <tr>
                                   <th data-column-id="id" data-type="numeric">ID</th>
            <th data-column-id="sender">Sender</th>
            <th data-column-id="received" data-order="desc">Received</th>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>


<script>
            var grid = $("#grid").bootgrid({
                ajax: true,
                ajaxSettings: {
                    method: "GET",
                    cache: false
                },
                url: 'data.json',
            }).on('loaded.rs.jquery.bootgrid', function () {

            });
        </script>

数据.JSON

{
  "current": 1,
  "rowCount": 5,
  "rows": [
    {
      "id": "a0e3a286-4343-4240-8d6d-e79fa2e94b4c",
      "sender": "test@test.de",
      "received": "2014-04-17 15:08:03Z"
    },
    {
      "id": "dd9f2d42-9442-404c-8d2a-dd3bd2156c03",
      "sender": "test@test.de",
      "received": "2014-04-16 15:19:31Z"
    },
    {
      "id": "e9b8ede5-c1bf-4d90-b724-e7379b25f7b3",
      "sender": "test@test.de",
      "received": "2014-04-16 15:17:05Z"
    },
    {
      "id": "153d3acb-efe7-4b5f-a3a9-e8ac18bdec30",
      "sender": "test@test.de",
      "received": "2014-04-16 15:17:05Z"
    },
    {
      "id": "49bad60a-bbf7-42bf-b040-d901805ccbf1",
      "sender": "test@test.de",
      "received": "2014-04-15 11:23:06Z"
    }
  ],
  "total": 5
}

【讨论】：

你的代码和我的差不多，正确加载json，但是当你要按id排序或接收时它没有排序或者当你获取它时没有搜索
@Manply 您好，请检查Bootgrid 并在您的函数中插入属性。
我不明白在我的函数中添加了哪些属性以获得正确的函数
@Manply 请关注我的Question，我也有类似的问题需要解决，抱歉我现在帮不了你，但我仍然很难解决我的问题，也许明天我会帮你解决问题，再次抱歉

【解决方案2】：

如果您像示例中那样返回一个简单的文件“data.json”，那么您将始终获得完整的内容。要进行排序、分页和搜索，您需要实现一个 API 或类似的东西，然后接受 POST 或 GET 参数（在文档中定义），然后对数据进行排序、分页、搜索。

你需要这样的东西：

//url: "data.json", // This only serves a full file at once and doesn't know how to sort etc.
url: "/api/GetSomeJsonData"

/api/GetSomeJsonData 是您的 API 并支持这些输入参数：

current= //current page you're on
rowCount= //rows per page
sort[sender]= //possible fields which were ordered + order direction
searchPhrase= //possible search term

【讨论】：