ブートストラップテーブル - 動的ボタンの行

ブートストラップv3を使用しています。私は絵のように効果を得ようとします。私はボタンを表示したいのですが、"Item Name"をpopupに表示します。しかし、私のボタンは表示されません。ブートストラップテーブル - 動的ボタンの行

問題は、私のテーブルの性質がダイナミックであることです（フォームJSON） - これは困難です。

画像：

var $table = $('#table'); 
 
var mydata = [{ 
 
    "id": 0, 
 
    "name": "test0", 
 
    "price": "$0" 
 
    }, 
 
    { 
 
    "id": 1, 
 
    "name": "test1", 
 
    "price": "$1" 
 
    }, 
 
    { 
 
    "id": 2, 
 
    "name": "test2", 
 
    "price": "$2" 
 
    } 
 
]; 
 

 
$(function() { 
 
    $('#table').bootstrapTable({ 
 
    data: mydata 
 
    }); 
 
});

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <script src="https://cdnjs.cloudflarenter code heree.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <table id="table" data-search="true"> 
 
     <thead> 
 
     <tr> 
 
      <th data-field="id" data-sortable="true">Item ID</th> 
 
      <th data-field="name" data-sortable="true">Item Name</th> 
 
      <th data-field="price" data-sortable="true">Item Price</th> 
 
      <th>Show Name</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr></tr> 
 
     <tr></tr> 
 
     <tr></tr> 
 
     <tr> 
 
      <td> 
 
      <button type="button" class="btn btn-primary btn-sm">Small button</button> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</body> 
 

 
</html>

私はあなたの助けのために感謝するでしょう。このことができます

出典

2017-10-01 user3794273

だから、あなたはアイテム名をクリックして開かれたポップアップ（モーダル）を持っていると思いますか？ –

はい、ポップアップ。しかし、ボタンをクリックした後。クリックしてボタンを押してください1st show test0、click button 2st show test1など – user3794273

こんにちは、これはいくらか必要ですか？ https://jsfiddle.net/tmyfssw2/。私はCSSを追加しなかった。コピーしてコピーしてください：P –

・ホープ..

<html> 

<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script> 
</head> 

<body> 
    <div class="container"> 
    <table id="table" data-search="true"> 
     <thead> 
     <tr> 
      <th data-field="id" data-sortable="true">Item ID</th> 
      <th data-field="name" data-sortable="true">Item Name</th> 
      <th data-field="price" data-sortable="true">Item Price</th> 
      <th>Show Name</th> 
     </tr> 
     </thead> 
     <tbody> 

     </tbody> 
    </table> 
    </div> 

    <!-- Modal --> 
    <div id="myModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title"></h4> 
      </div> 
      <div class="modal-body"> 
      <p></p> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

     </div> 
    </div> 


    <script> 


      var $table = $('#table'); 
      var mydata = [{ 
       "id": 0, 
       "name": "test0", 
       "price": "$0" 
       }, 
       { 
       "id": 1, 
       "name": "test1", 
       "price": "$1" 
       }, 
       { 
       "id": 2, 
       "name": "test2", 
       "price": "$2" 
       } 
      ]; 

      $(function() { 
       $('#table').bootstrapTable({ 
       data: mydata, 
       columns: [ {},{},{}, 
       { 
        field: 'operate', 
        title: 'Edit', 
        align: 'center', 
        valign: 'middle', 
        clickToSelect: false, 
        formatter : function(value,row,index) { 
        //return '<input name="elementname" value="'+value+'"/>'; 
        return '<button class=\'btn btn-primary \' pageName="'+row.name+'" pageDetails="'+row.price+'" >Edit</button> '; 
        } 
       } 
       ]    
       }); 


      $(".btn").click(function(){ 
       var pageDetails = $(this).attr('pageDetails'); 
       var pageName = $(this).attr('pageName'); 
       $(".modal .modal-title").html(pageName); 
       $(".modal .modal-body").html(pageDetails); 
       $(".modal").modal("show"); 

      }); 

      }); 




    </script> 




</body> 

</html>

出典

2017-10-04 11:49:41

あなたは単に可能な答えを掲示するのではなく、あなたがしていることを説明できますか？だからOPなどがあなたのコードから学ぶことができました –

ありがとうございました。それはそれだった:) 私が間違っていることについてもっと詳しく書くことができますか？ – user3794273

データテーブルに列を追加するコードを追加しました。フォーマッタは、ボタンを含む列を追加します。ボタンのデータ属性には、モーダルで使用される情報が含まれています。 $。 Btnクリック機能は、ボタンのクリック時にデータ属性を取得し、それをモーダルに渡します。これがうまくいくと思います... –

ブートストラップテーブル - 動的ボタンの行

答えて

関連する問題