我已经遵循了以下JQuery Bootgrid教程/文档，以便为我的数据库创建dataGrid。
http://www.abrandao.com/2014/11/bootstrap-bootgrid-with-php-pdo-server-script/
http://www.jquery-bootgrid.com/Documentation#column
不幸的是，当尝试使用“格式器”显示命令按钮时，无法在下面的代码上显示命令按钮：
<!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配置选项，它与您的代码相同，而不是编辑和删除图标类，我正在使用引导程序
$( 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/