jQuery bootgrid无法添加命令

时间:2015-12-08 01:29:41

标签: 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, 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>

它应该从mysql查看数据没有任何问题但是当我尝试添加包含删除按钮的命令时,没有任何显示请帮助我在互联网上搜索任何逻辑原因的数小时!! {/ p>

1 个答案:

答案 0 :(得分:0)

我也尝试让命令正常工作,到目前为止,我有以下显示按钮的js代码,但不是点击警告:

<tr valign="bottom">
        <th id="cashAccount1" scope="row" headers="cashAccountNameNumber" class="firstCol text rowhead">...</th>
        <td id="cashAvailBal1" headers="cashAccount1 cashAvailableBalance" class="amount">...</td>
        <td id="RelatedActivities1" headers="cashAccount1 cashRelatedActivities" class="btlRelatedActivities">...</td>
</tr>
<tr valign="bottom">
        <th id="cashAccount2" scope="row" headers="cashAccountNameNumber" class="firstCol text rowhead">...</th>
        <td id="cashAvailBal2" headers="cashAccount2 cashAvailableBalance" class="amount">...</td>
        <td id="RelatedActivities2" headers="cashAccount2 cashRelatedActivities" class="btlRelatedActivities">...</td>
</tr>

命令在返回按钮的格式化程序中起作用。