BootGrid示例JSON不起作用（使用代碼）

我按照步驟操作，如示例所示，並且我既不運行搜索也不按順序運行搜索或接收。這個例子是在URL Bootgrid Example JSON BootGrid示例JSON不起作用（使用代碼）

在這個例子中它正常工作和缺少的東西

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>jQuery Bootgrid Demo</title> 

     <!-- CSS --> 
     <link href="css/bootstrap/bootstrap.css" rel="stylesheet" /> 
     <link href="css/bootgrid/jquery.bootgrid.css" rel="stylesheet" /> 
     <style> 
      @-webkit-viewport { width: device-width; } 
      @-moz-viewport { width: device-width; } 
      @-ms-viewport { width: device-width; } 
      @-o-viewport { width: device-width; } 
      @viewport { width: device-width; } 

      body { padding-top: 70px; } 

      .column .text { color: #f00 !important; } 
      .cell { font-weight: bold; } 
      .pagination{cursor: pointer} 
     </style> 

     <!-- JS --> 
     <script src="js/jquery/jquery-1.11.1.min.js"></script> 
     <script src="js/bootstrap/bootstrap.js"></script> 
     <script src="js/bootgrid/jquery.bootgrid.js"></script> 
     <script> 
      $(document).ready(function() 
      { 
       var grid = $("#grid-data").bootgrid(
       { 
        ajax: true, 
        url: "data.json", 
        formatters: 
        { 
         "commands": function(column, row) 
         { 
          return "<button type=\"button\" class=\"btn btn-sm btn-primary command-edit\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> " + 
           "<button type=\"button\" class=\"btn btn-sm btn-danger command-delete\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-trash\"></span></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")); 
        }).end().find(".command-delete").on("click", function(e) 
        { 
         alert("You pressed delete on row: " + $(this).data("row-id")); 
        }); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 

     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-9"> 
        <!--div class="table-responsive"--> 
         <table id="grid-data" class="table table-condensed table-hover table-striped"> 
          <thead> 
           <tr> 
            <th data-column-id="id" data-type="numeric">ID</th> 
      <th data-column-id="sender">Sender</th> 
      <th data-column-id="received" data-order="desc">Received</th> 
      <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th> 
           </tr> 
          </thead> 
          <tbody> 

          </tbody> 
         </table> 
        <!--/div--> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

data.json

{ 
    "current": 1, 
    "rowCount": 10, 
    "rows": [ 
    { 
     "id": 19, 
     "sender": "[email protected]", 
     "received": "2014-05-30T22:15:00" 
    }, 
    { 
     "id": 14, 
     "sender": "[email protected]", 
     "received": "2014-05-30T20:15:00" 
    } 
    ] 
}

來源

2017-03-08 Manply

打開瀏覽器的控制檯（鉻如F12，控制檯選項卡）並檢查它是否有錯誤。如果有幫助，請參閱[此JSFiddle]（https://jsfiddle.net/L2gfe6ey/1/）示例。 – Alisson

你的例子工作正常，但是當你把外部源json，你既不能過濾也不能搜索 – Manply

希望我的代碼下面是您可以接受，另一方面，請讓我知道我的代碼在您的環境中是否無效。

<table id="grid" class="table table-condensed table-hover table-striped"> 
          <thead> 
           <tr> 
            <th data-column-id="id" data-type="numeric">ID</th> 
      <th data-column-id="sender">Sender</th> 
      <th data-column-id="received" data-order="desc">Received</th> 
      <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th> 
           </tr> 
          </thead> 
          <tbody> 

          </tbody> 
         </table> 


<script> 
      var grid = $("#grid").bootgrid({ 
       ajax: true, 
       ajaxSettings: { 
        method: "GET", 
        cache: false 
       }, 
       url: 'data.json', 
      }).on('loaded.rs.jquery.bootgrid', function() { 

      }); 
     </script>

DATA.JSON

{ 
    "current": 1, 
    "rowCount": 5, 
    "rows": [ 
    { 
     "id": "a0e3a286-4343-4240-8d6d-e79fa2e94b4c", 
     "sender": "[email protected]", 
     "received": "2014-04-17 15:08:03Z" 
    }, 
    { 
     "id": "dd9f2d42-9442-404c-8d2a-dd3bd2156c03", 
     "sender": "[email protected]", 
     "received": "2014-04-16 15:19:31Z" 
    }, 
    { 
     "id": "e9b8ede5-c1bf-4d90-b724-e7379b25f7b3", 
     "sender": "[email protected]", 
     "received": "2014-04-16 15:17:05Z" 
    }, 
    { 
     "id": "153d3acb-efe7-4b5f-a3a9-e8ac18bdec30", 
     "sender": "[email protected]", 
     "received": "2014-04-16 15:17:05Z" 
    }, 
    { 
     "id": "49bad60a-bbf7-42bf-b040-d901805ccbf1", 
     "sender": "[email protected]", 
     "received": "2014-04-15 11:23:06Z" 
    } 
    ], 
    "total": 5 
}

來源

2017-03-09 08:18:04

你的代碼幾乎和我的類似，正確加載json，但是當你要通過id排序或收到它時順序或當你提取它不搜索 – Manply

@ Manply你好，請檢查[Bootgrid]（http://www.jquery-bootgrid.com/Documentation）並將屬性插入到你的函數。 –

我不明白哪些屬性添加在我的功能正確的功能 – Manply

如果你在你的例子返回一個簡單的文件「data.json」一樣，那麼你將獲得的全部內容了。要進行排序，分頁和搜索，您需要實現一個API或類似的東西，然後使用POST或GET參數（在文檔中定義），然後對頁面搜索數據進行排序。

你需要的東西是這樣的：

//url: "data.json", // This only serves a full file at once and doesn't know how to sort etc. 
url: "/api/GetSomeJsonData"

凡/ API/GetSomeJsonData是你的API，並支持這些輸入參數：

current= //current page you're on 
rowCount= //rows per page 
sort[sender]= //possible fields which were ordered + order direction 
searchPhrase= //possible search term

來源

2017-03-09 13:05:16 Iztoksson

BootGrid示例JSON不起作用（使用代碼）

回答

相關問題