jqueryブートグリッドでコマンドボタンが表示されない

DBのデータグリッドを作成するために、以下のJQuery Bootgridチュートリアル/ドキュメントに従ってきました。jqueryブートグリッドでコマンドボタンが表示されない

"フォーマッタ" を使用してそれらを表示しようとすると残念ながら、私は、以下のコードでコマンドボタンを表示することができませんよ。

<!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 --> 
 
\t <link href="js/jquery.bootgrid-1.3.1/jquery.bootgrid.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> \t 
 
\t <!--define the table using the proper table tags, leaving the tbody tag empty --> 
 
\t <table id="grid-data" class="table table-condensed table-hover table-striped" data-toggle="bootgrid" data-ajax="true" data-url="includes/jsonDataGridRecordings.php"> 
 
\t \t <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> 
 
\t \t </thead> \t 
 
\t </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> 
 
\t <!-- 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 --> 
 
    \t <script type="text/javascript"> 
 
\t //Refer to http://jquery-bootgrid.com/Documentation for methods, events and settings 
 
     var grid = $("#grid-data").bootgrid({  
 
     \t post: function(){ 
 
\t \t   return { 
 
\t \t    id: "b0df282a-0d67-40e5-8558-c9e93b7befed" 
 
\t \t   }; 
 
\t \t  }, 
 
\t \t  formatters: { 
 
\t \t   "commands": function(column, row) 
 
\t \t   { 
 
\t \t    return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-pencil\"></span></button> " + 
 
\t \t     "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-trash-o\"></span></button>"; 
 
\t \t   } 
 
\t \t  } 
 
     }).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")); 
 
      }); 
 
     }); 
 
\t 
 
\t </script> 
 
\t </body> 
 
</html>

私はbootgrid設定オプションの下に使用しています

出典

2016-09-04 Juankam Del Toro

このは、その代わりに、編集のあなたのコードと同じと削除アイコンクラス、......、私はクレイジー事前にあなたの助けのための多くのおかげで駆動している、私が使用しています

$(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/

出典

2016-09-05 06:08:53

あなたはParvez正しかった、チュートリアルの下に延びるいますボタンが表示されませんでした....本当にあなたの助けを感謝します。 –

jqueryブートグリッドでコマンドボタンが表示されない

答えて

関連する問題