Question

我已经按照下面的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>

这让我发疯了，非常感谢你的帮助......

Answer 1

我正在使用下面的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/

jquery bootgrid不显示命令按钮

1 个答案: