jQuery Bootgrid无法正常工作

2023年10月15日 152次阅读

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

而且基本上就是这样……为什么没有任何一个功能无法正常工作,你可以看到…没有：我没有测试过分页但是如果这也不起作用也不会让我感到惊讶.

谢谢你的帮助

最佳答案 问题是,该函数是在页面元素完全加载之前执行的.

你可以将函数放在$(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

点赞