4

我可以使用一些帮助。我在使用 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
}

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

谢谢你的帮助

4

3 回答 3

2

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

你可以把函数放在里面$(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();
});

预习

于 2015-08-19T20:56:18.973 回答
0

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

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

于 2015-12-02T15:07:51.040 回答
0

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

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

于 2016-11-18T03:40:48.157 回答