Question

我按照步骤操作，如示例所示，我既不运行搜索，也不运行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"
    }
    ]
}

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

DATA.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
}

Answer 2

如果要返回一个简单的文件＆＃34; data.json＆＃34;就像在你的例子中一样，你将总是得到完整的内容。要进行排序，分页和搜索，您需要实现一个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

BootGrid示例JSON不起作用（使用代码）

2 个答案: