我遵循下面的JQuery Bootgrid教程/文档，以便为我的数据库创建一个dataGrid。
- http://www.abrandao.com/2014/11/bootstrap-bootgrid-with-php-pdo-server-script/
http://www.jquery-bootgrid.com/Documentation列
不幸的是，当我试图使用"formatters"来显示Command按钮时，我无法在下面的代码中显示它们:
<!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>这简直要把我逼疯了，提前感谢你的帮助....
我使用下面的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"));
});
});
});
我在下面扩展教程，simple-example-bootgrid-server-side-with-php-mysql-and-ajax/