jquery bootgrid가 명령 단추를 표시하지 않습니다.

DB 용 데이터 격자를 만들려면 아래의 JQuery Bootgrid 자습서/설명서를 참조하십시오.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>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

이 6,그 대신 편집의 코드와 같은 및 삭제 아이콘 클래스, ..., 나를 미치게 사전에 도와 주셔서 많은 감사를 운전, 내가 사용하고

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

부트 스트랩 당신은, 그러므로, 내가 없어진 것은 내가 명령 열 이름을 가진 다른 객체를 가지고 있다는 것입니다, 정말 감사합니다, 바로 베즈했다 버튼이 나타나지 않았습니다 .... 정말로 도움을 주셨습니다. –

jquery bootgrid가 명령 단추를 표시하지 않습니다.

답변

관련 문제