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 を使用している場合、検索やページネーションなどの機能はサーバー側で実行されることが期待されます。したがって、テーブルのデフォルトの投稿結果から検索入力を取得する必要があります。

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

于 2016-11-18T03:40:48.157 に答える