チェックボックスで選択した場合、BootstrapTableから別のHTMLテーブルに行をコピーする方法は？

SQLデータベースからデータを取得するブートストラップで作成されたHTMLテーブルがあります。この表の最初の列にチェックボックスを追加しましたが、フォームを追加して送信し、チェックボックスで選択した行のみを持つ新しいテーブルを作成したいとします。行は元のテーブルから削除する必要があります。私はテーブルの上をループするためにいくつかのjQueryコードが必要だと思うが、私は選択された行だけで新しいテーブルを作成する方法を知らない。チェックボックスで選択した場合、BootstrapTableから別のHTMLテーブルに行をコピーする方法は？

ありがとうございます。

<html> 
<head> 
    <title> Dashboard</title> 
    <link type="text/css" href="css/bootstrap.min.css" rel="stylesheet"> 
    <link type="text/css" href="css/bootstrap-table.css" rel="stylesheet"> 
    <link type="text/css" href="css/font-awesome.css" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" href="custom.css"> 
</head> 
<body> 
    <div class="container"> 
    <div class="col-md-12"> 
     <div class="panel panel-success"> 
     <div class="panel-body"> 
      <div class="row"> 
      <div class="col-md-12"> 
       <table id="table" data-show-columns="true" data-height="460"> 
       </table> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
    <script src="js/jquery-1.11.1.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/bootstrap-table.js"></script> 
    <script type="text/javascript"> 
    var $table = $('#table'); 
    $table.bootstrapTable({ 
     url: 'list-leads.php', 
     search: true, 
     pagination: true, 
     buttonsClass: 'primary', 
     showFooter: true, 
     minimumCountColumns: 2, 
     columns: [{ 
     data: '', 
     title: '', 
     checkbox: true, 
     }, { 
     field: 'num', 
     title: '#', 
     sortable: true, 
     }, { 
     field: 'registrant', 
     title: 'registrant', 
     sortable: true, 
     }, ], 
    }); 
    </script> 
</body> 
</html>

出典

2017-12-29 user3379132

あなたが作成する必要が新しい 'table'は' html'テーブルまたは 'sql'のですか？ –

HTML。そのため、元の表の列の一部はCSSを使用してぼかして表示され、選択して送信すると完全なデータを表示できるはずです。 – user3379132

Okと、選択された 'row'をコピーしなければならない' table'もまたブートストラップテーブル –

EDIT

OPは非常に元のテーブルから身を追加した行を削除することができなかったので、私はいくつかのデータをロードし、それらをあなたがすることができます願って使用する例を変更しなければなりませんでしたテーブルの属性にdata-unique-id="column_name"を指定して、unique列として列を選択することが重要です。選択する列の値が大文字であることを確認してください。id作業を行い、bootstrapTableによって提供されるremoveByUniqueIdメソッドを使用して、削除したい、とあなたがイベントになるはず列のIDは、私はあなたがcheckboxesすなわちcheck.bs.tableのためのブートストラップ・イベントを使用することができます答え

に、下記のリンクで提供チャート。

これは、ユーザーが行を確認するとき、パラメータが含まれて発射：

行：レコードがクリックされた行に対応します。

$ element：チェックされたDOM要素。

私はあなたがbootstraptableからコピーした行を無効にするようなものの残りのためのキックスタートを持つことができるように、テーブルに行をコピーするために、最小限の例を作成しています。

同様に、チェックを外した場合は、行を削除する場合は、、つまりuncheck.bs.tableを使用する必要があります。ブートストラップテーブルのすべてEventsをご覧ください。

最小限のオプションについてはフルスクリーンのデモをご覧ください。それがあなたを助けることを願っています。

var data = [{ 
 
    "name": "bootstrap-table", 
 
    "stargazers_count": "526", 
 
    "forks_count": "122", 
 
    "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) " 
 
    }, 
 
    { 
 
    "name": "multiple-select", 
 
    "stargazers_count": "288", 
 
    "forks_count": "150", 
 
    "description": "A jQuery plugin to select multiple elements with checkboxes :)" 
 
    }, 
 
    { 
 
    "name": "bootstrap-show-password", 
 
    "stargazers_count": "32", 
 
    "forks_count": "11", 
 
    "description": "Show/hide password plugin for twitter bootstrap." 
 
    }, 
 
    { 
 
    "name": "blog", 
 
    "stargazers_count": "13", 
 
    "forks_count": "4", 
 
    "description": "my blog" 
 
    }, 
 
    { 
 
    "name": "scutech-redmine", 
 
    "stargazers_count": "6", 
 
    "forks_count": "3", 
 
    "description": "Redmine notification tools for chrome extension." 
 
    } 
 
]; 
 

 

 
$table = $('#table').bootstrapTable({ 
 
    data: data 
 
}); 
 
$('#table').on('check.bs.table', function(e, row, $el) { 
 

 
    $table.bootstrapTable('removeByUniqueId', row.forks_count); 
 
    $('#duplicate > tbody:last-child').append('<tr id="' + $el.closest('tr').data('index') + '"><td >' + row.name + '</td><td>' + row.stargazers_count + '</td><td>' + row.forks_count + '</td></tr>'); 
 

 
}); 
 
$('#table').on('uncheck.bs.table', function(e, row, $el) { 
 
    $('#duplicate > tbody tr#' + $el.closest('tr').data('index')).remove(); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> 
 

 
<!-- Latest compiled and minified Locales --> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script> 
 

 

 
<div class="row"> 
 
    <div class="col-sm-6"> 
 

 
    <table id="table" data-unique-id="forks_count"> 
 
     <thead> 
 
     <tr> 
 
      <th data-field="state" data-checkbox="true"></th> 
 
      <th data-field="name">Name</th> 
 
      <th data-field="stargazers_count">Stars</th> 
 
      <th data-field="forks_count">Forks</th> 
 
     </tr> 
 
     </thead> 
 
    </table> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
    <table id="duplicate" class="table table-striped"> 
 
     <thead> 
 
     <tr> 
 
      <th> 
 
      Name 
 
      </th> 
 
      <th> 
 
      Star 
 
      </th> 
 
      <th> 
 
      Forks 
 
      </th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

出典

2017-12-29 20:51:14

ありがとうございました！また、アイテムを別のテーブルに追加した後に元のテーブルからアイテムを削除するにはどうすればよいですか？ – user3379132

@ user3379132私はちょうど答えを更新しました。行の追加と削除の方法を見てみるために追加された新しい例を参照してください。それが助けてくれることを願って、それがあなたのために働くならば、正しい答えを選んでください。 –

チェックボックスで選択した場合、BootstrapTableから別のHTMLテーブルに行をコピーする方法は？

答えて

関連する問題