Mysql jQuery引导网格无法'；不要添加命令_Mysql_Jquery Bootgrid

Mysql jQuery引导网格无法'；不要添加命令

mysql

Mysql jQuery引导网格无法'；不要添加命令,mysql,jquery-bootgrid,Mysql,Jquery Bootgrid,首先为我的英语不好感到抱歉 <!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, initi

首先为我的英语不好感到抱歉

<!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>Manage News</title>
        <!-- Bootstrap CSS-->
        <link rel="stylesheet"     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.css">
        <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; }
            </style>


  </head>
  <body style="margin:16px; padding:16px">

    <!--define the table using the proper table tags, leaving the tbody tag empty -->
        <table id="grid-data" class="table table-bordered table-condensed table-hover table-striped" data-toggle="bootgrid" data-ajax="true" data-url="server.php">
        <thead>
            <tr>
                <th data-column-id="commands" data-formatter="commands" data-sortable="false" data-align="center" data-header-align="center">أوامر</th>
                <th data-column-id="da" data-align="center" data-header-align="center">التاريخ</th>
                <th data-column-id="ne" data-align="center" data-header-align="center">الخبر</th>
                <th data-column-id="ti" data-align="center" data-header-align="center">العنوان</th>
                <th data-column-id="id" data-type="numeric" data-identifier="true" data-align="center" data-header-align="center">رقم الخبر</th>    
            </tr>
        </thead>    
</table>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- Include bootgrid plugin (below), -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.js"></script>  


  <!-- now write the script specific for this grid -->
    <script>

            $("#grid-data").bootgrid({
                ajax: true,
                post: function ()
                {
                    return {
                        id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
                    };
                },
                url: "server.php",
            }).on("loaded.rs.jquery.bootgrid", function()
            {
                 alert("12");
                /* Executes after data is loaded and rendered */
                grid.find(".command-delete").on("click", function(e)
                {
                    alert("You pressed delete on row: " + $(this).data("row-id"));
                });
            });
        </script>

    </body>
</html>


管理新闻
@-webkit视口{宽度：设备宽度；}
@-moz视口{width:设备宽度；}
@-ms视口{宽度：设备宽度；}
@-o-视口{宽度：设备宽度；}
@视口{宽度：设备宽度；}
正文{padding top:70px；}
.column.text{color:#f00！重要；}
.    单元格{字体大小：粗体；}
أوامر
التاريخ
الخبر
العنوان
رقم الخبر    
$（“#网格数据”）.bootgrid({
阿贾克斯：没错，
职位：职能（）
{
返回{
id:“b0df282a-0d67-40e5-8558-c9e93b7befed”
};
},
url:“server.php”，
}).on（“loaded.rs.jquery.bootgrid”，函数（）
{
警报（“12”）；
/*在加载和呈现数据后执行*/
grid.find（“.command delete”）。在（“单击”上，函数（e）
{
警报（“您在行上按了删除：”+$（this）.data（“行id”）；
});
});

它应该可以查看mysql中的数据，这是没有任何问题的，但是当我尝试添加包含删除按钮的命令时，没有显示任何内容，请帮助，因为任何逻辑原因，我在internet上搜索了很多小时

我也在尝试让命令正常工作，到目前为止，我有以下js代码显示按钮，但没有单击时的警报：

<script language="javascript">
// bootgrid
    function init()
    {
        $("#grid").bootgrid({
            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>";
                }
            },
            rowCount: [-1, 10, 50, 75]
        }).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"));
            });
        });
    }

    init();
});


//引导网格
函数init（）
{
$（“#网格”）.bootgrid({
格式化程序：{
“命令”：功能（列、行）
{
返回“”+
"";
}
},
行数：[-1,10,50,75]
}).on（“loaded.rs.jquery.bootgrid”，函数（）
{
/*在加载和呈现数据后执行*/
grid.find（“.command edit”）。在（“单击”上，函数（e）
{
警报（“您按了行上的编辑：”+$（this）.data（“行id”）；
}).end（）.find（“.command delete”）。在（“单击”上，函数（e）
{
警报（“您在行上按了删除：”+$（this）.data（“行id”）；
});
});
}
init（）；
});

返回按钮的是格式化程序中的commands函数。

格式化程序在哪里？通过将grid.find替换为$（this.find），使点击警报生效