jquery bootgrid不顯示命令按鈕
[英]jquery bootgrid not displaying command buttons
問題描述
我已經按照下面的JQuery Bootgrid教程/文檔來為我的數據庫創建一個dataGrid。
不幸的是，當我嘗試使用“格式化程序”顯示它們時，我無法在下面的代碼上顯示命令按鈕：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootgrid Sample Template</title> <!-- Bootstrap CSS--> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Include bootgrid CSS below --> <link href="js/jquery.bootgrid-1.3.1/jquery.bootgrid.min.css" rel="stylesheet"> </head> <body> <!--define the table using the proper table tags, leaving the tbody tag empty --> <table id="grid-data" class="table table-condensed table-hover table-striped" data-toggle="bootgrid" data-ajax="true" data-url="includes/jsonDataGridRecordings.php"> <thead> <tr> <th data-column-id="id" data-type="numeric" data-identifier="true">id</th> <th data-column-id="format">Format</th> <th data-column-id="source">Source</th> <th data-column-id="location" data-order="desc">Location</th> <th data-column-id="title">Title</th> <th data-column-id="subtitle">Subtitle</th> <th data-column-id="person">Person</th> <th data-column-id="urn">URN</th> <th data-column-id="commands" data-formatter="commands" data-sortable="false"></th> </tr> </thead> </table> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-1.12.4.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <!-- Include bootgrid plugin (below), --> <script src="js/jquery.bootgrid-1.3.1/jquery.bootgrid.min.js"></script> <!-- now write the script specific for this grid --> <script type="text/javascript"> //Refer to http://jquery-bootgrid.com/Documentation for methods, events and settings var grid = $("#grid-data").bootgrid({ post: function (){ return { id: "b0df282a-0d67-40e5-8558-c9e93b7befed" }; }, formatters: { "commands": function(column, row) { return "<button type=\\"button\\" class=\\"btn btn-xs btn-default command-edit\\" data-row-id=\\"" + row.id + "\\"><span class=\\"fa fa-pencil\\"></span></button> " + "<button type=\\"button\\" class=\\"btn btn-xs btn-default command-delete\\" data-row-id=\\"" + row.id + "\\"><span class=\\"fa fa-trash-o\\"></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> </body> </html>
這讓我發瘋，非常感謝你提前幫助....
1 個解決方案
解決方案1
0 2016-09-05 06:08:53
我使用下面的bootgrid配置選項，它與你的代碼相同，而不是編輯和刪除圖標類，我正在使用bootstrap
$( document ).ready(function() {
var grid = $("#employee_grid").bootgrid({
ajax: true,
post: function ()
{
/* To accumulate custom parameter with the request object */
return {
id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
};
},
url: "response.php",
formatters: {
"commands": function(column, row)
{
return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> " +
"<button type=\"button\" class=\"btn btn-xs btn-default 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"));
});
});
});
我在教程下面進行了擴展， 簡單 - 示例 - bootgrid-server-side-with-php-mysql-and-ajax /
使用jQuery Bootgrid方法
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.