Question

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

我引用了以下内容

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

我的代码很基本

HTML

dataSource: {
  type: "json",
  transport: {
    read: "http://localhost:65401/sdrservice.svc/IssueLists"
  },                    
  pageSize: 20,
  schema: {
    data: function(response) {
      return response.value;
    }
  }
}

的JavaScript

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

JSON结果

// 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"));
        });
    });
}

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

感谢您的帮助

Answer 1

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

您可以将该功能放在$(function() { });

中

<强> e.g

$(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

Answer 2

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

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

Answer 3

当你在bootgrid中使用ajax时，预计会在服务器端完成搜索和分页等功能。因此，您应该从表的defualt post结果中获取搜索输入。

电流= 1＆安培; rowCount时= 10安培;排序[发送方] = ASC＆安培; searchPhrase =和ID = b0df282a-0d67-40e5-8558-c9e93b7befed

jQuery Bootgrid无法正常工作

3 个答案: