问jQuery bootgrid无法添加命令
EN

Stack Overflow用户

提问于 2015-12-08 09:29:41

回答 1查看 490关注 0票数 0

首先，我为我糟糕的英语道歉

<!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查看数据，这是没有任何问题的，但当我试图添加包含删除按钮的命令时，什么也没有出现，请帮帮我，我因为任何逻辑原因在互联网上搜索了很多小时!！

jquery-bootgrid

mysql

回答 1

Stack Overflow用户

发布于 2016-02-04 07:53:16

我也在尝试让命令工作，到目前为止，我有以下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();
});

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34146467

复制

相似问题

问jQuery bootgrid无法添加命令
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery bootgrid无法添加命令EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery bootgrid无法添加命令
EN