Question

我遇到一个问题，在点击或选择分页更改时会重置我在col中的所选条目。

例如。首先，我将ma数据显示在表格中，并在col中显示一个选择框。有很多页面要显示（1,2,3）我更改了页面＃1中选择框的内容，然后单击分页切换。内容被重置（之前没有保留我的选择）。

data-maintain-selected="true"

我预计在分页更改后保留这个，但不是。有没有办法保存这些数据？

感谢您的帮助。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
 <script type="text/javascript">
    function pagin() {
     $("#table").bootstrapTable("togglePagination");
   }
 </script>
<div id="page_body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="fpbx-container">
          <div class="display full-border">
            <button onclick="pagin()">
              Pagination On/Off
            </button>

            <table id="table" data-show-toggle="True" data-maintain-selected="true" data-pagination="True" class="table table-striped"></table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>    

</body>

</html>

加载Javascript。

$('#table').bootstrapTable({
columns: [{
    field: 'id',
    title: 'Item ID'
}, {
    field: 'name',
    title: 'Item Name'
}, {
    field: 'price',
    title: 'Item Price'
}],
data: [{
    id: 1,
    name: 'Item 1',
    price: '<select><option value="10">$10</option><option value="20">$20</option></select>'
}, {
    id: 2,
    name: 'Item 2',
    price: '<select><option value="10">$10</option><option value="20">$20</option></select>'
}]
});

JSFiddle： https://jsfiddle.net/fdanard/n0ky502r/3/

如果有人想帮助我并避免删除和修改我的帖子。：）

Answer 1

数据应严格地是表格的数据。可以使用formatter（data-formatter）

设置数据列中的任何HTML对象或特殊格式

function formatForks(value, row, index) {

  var selectCode = '<select>';
  var forksAllowed = [0, 10, 20, 30];

  forksAllowed.forEach(function(ii) {
selectCode += '<option value="' + ii + '"'  + (value==ii?' selected ':'') +'>$' + ii + '</option>';

}）;

  selectCode += '</select>'
  return selectCode;
}

请参阅此JSFiddle - note the forksFormatter function

更改分页切换时重置bootstrap-table数据

1 个答案: