通過復選框選中時，如何將行從 BootstrapTable 復制到另一個 Html 表？

Question

我有一個用 bootstrap 創建的HTML表，它從SQL數據庫中獲取數據。 我已將復選框添加到此表的第一列，但我想添加一個表單來提交它並創建一個僅包含復選框選擇的行的新表。 應從原始表中刪除行。 我想我需要一些 jQuery 代碼來遍歷表，但我不知道如何創建一個只有選定行的新表。

提前致謝。

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

Answer 1

編輯

由於 OP 無法自己從原始表中刪除添加的行，因此我不得不更改示例以加載一些數據並使用它們希望您能夠從這里向前推進，主要是選擇一個通過使用data-unique-id="column_name"將列指定為表屬性，將列作為unique列，確保您選擇的列具有唯一值，主要是來自數據庫或任何自定義計數器的id列將完成工作，然后使用 bootstrapTable 提供的removeByUniqueId方法並將要刪除的列的 id 傳遞給它，你應該查看我在下面的鏈接中提供的事件圖表作為答案

您可以將引導事件用於checkboxes即check.bs.table 。

當用戶檢查一行時觸發，參數包含：

row：點擊行對應的記錄。

$element：被檢查的 DOM 元素。

我正在創建一個將行復制到表的最小示例，以便您可以啟動其余的操作，例如從bootstraptable禁用復制的行。

同樣，如果你想刪除的行，如果你未核對的，那么你需要使用onUncheck即uncheck.bs.table 。看到所有活動的引導表。

請參閱以下全屏演示，了解最少的選項。 希望能幫到你。

 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>

通過復選框選中時，如何將行從 BootstrapTable 復制到另一個 Html 表？

問題描述

1 個解決方案

解決方案1
1 已采納 2017-12-29 20:51:14

通過復選框選中時，如何將行從 BootstrapTable 復制到另一個 Html 表？

問題描述

1 個解決方案

解決方案1 1 已采納 2017-12-29 20:51:14

解決方案1
1 已采納 2017-12-29 20:51:14