jQuery Bootgrid 无法正常工作

Question

我需要一些帮助。我在使用 ajax 的页面上有一个 jQuery Bootgrid。当数据正确加载并且网格正确渲染时。所有功能似乎都无法正常工作，包括搜索框、排序、刷新等。同样，我没有收到任何 javascript 错误。

我引用以下内容

• jquery.bootgrid.min.css
• jquery.bootgrid.min.js
• jquery.bootgrid.fa.min.js

我的代码非常基础

HTML

<table id="jobGrid" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th data-column-id="JobNumber" data-identifier="true" data-type="string">Job Number</th>
            <th data-column-id="JobName" data-type="string">Job Name</th>
            <th data-column-id="JobState" data-type="string">Request State</th>
            <th data-column-id="JobStatus" data-type="string">Status</th>
            <th data-column-id="JobRequestor" data-type="string">Requestor</th>
            <th data-column-id="LastModifiedDate" data-type="date" data-order="desc">Last Modified</th>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
        </tr>
    </thead>
</table> 

JavaScript

// Planning Filter
var planningFilter = function () {
    // NOTE: I have multiple types of basic filters. 
    // eg: Planning, Approved, Completed
    $("#jobGrid").bootgrid("destroy");
    var grid = $("#jobGrid").bootgrid({
        ajax: true,
        ajaxSettings: {
            method: "GET",
            cache: false
        },
        url: RestService.GetJobsInPlanningSvr(),
        formatters: {
            "commands": function (column, row) {
                return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.JobNumber + "\"><span class=\"fa fa-pencil\"></span>&nbsp;&nbsp;View Details</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"));
        });
    });
}

JSON 结果

{
    "current":1,
    "rowCount":10,
    "rows":[
        {"CustomerID":"88888888-8888-8888-8888-888888888888","JobNumber":"DMPC-2","JobName":"DMPC-2: Transfer 645 Units to Warehouse","JobState":"Request Draft","JobStatus":"In Planning","JobRequestor":"Jim Halpert","LastModifiedUTS":1439768413,"LastModifiedDate":"8/16/2015"},
        {"CustomerID":"88888888-8888-8888-8888-888888888888","JobNumber":"DMPC-1","JobName":"DMPC-1: Scranton Chamber of Commerce Delivery","JobState":"Request Draft","JobStatus":"Pending Approval","JobRequestor":"Dwight Schrute","LastModifiedUTS":1440009361,"LastModifiedDate":"8/19/2015"}
    ],
    "total":2
}

基本上就是这样...您可以看到任何功能都不起作用的任何原因...不是：我没有测试分页但是如果这也不起作用我也不会感到惊讶。

感谢您的帮助

Answer 1

当您将 ajax 与 bootgrid 一起使用时，搜索和分页等功能预计将在服务器端完成。因此，您应该从表的默认发布结果中获取搜索输入。

current=1&rowCount=10&sort[sender]=asc&searchPhrase=&id=b0df282a-0d67-40e5-8558-c9e93b7befed

Answer 2

我认为您的服务器端没有正确响应来自网格的请求。在服务器端放一个断点，我想你会发现它被调用了......

需要从request.args中提取“current”（currentPage）和“rowCount”，然后返回正确的json...

Answer 3

问题是，该函数是在页面元素完全加载之前执行的。

你可以把函数放在$(function() { });里面

例如

$(function() {  
  // Planning Filter
  var planningFilter = function () {
      // NOTE: I have multiple types of basic filters. 
      // eg: Planning, Approved, Completed
      $("#jobGrid").bootgrid("destroy");
      var grid = $("#jobGrid").bootgrid({
          ajax: true,
          ajaxSettings: {
              method: "GET",
              cache: false
          },
          url: "data.json",
          formatters: {
              "commands": function (column, row) {
                  return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.JobNumber + "\"><span class=\"fa fa-pencil\"></span>&nbsp;&nbsp;View Details</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"));
          });
      });
  }

  planningFilter();
});

Preview