Question

我已经能够将JSON文件加载到表中了，但是我希望有多个JSON文件，并根据按下的按钮更改哪一个加载到表中。我以为我可以让它改变变量data，但是表格仍然保持不变（我假设你必须让它刷新一些怎么样？）。

另外，在旁注中，价格之间是否有空格？

test.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <meta name="description" content="Hello World">
  <!-- Latest compiled and minified CSS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.css">
  <script src="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.js"></script>
  <script src="data1.json"></script>
  <script src="data2.json"></script>

  <script>
  $(function () {
    $('#table').bootstrapTable({
      data: data_one
    });

    $('#data1').on('click', function(event) {
      $('#table').bootstrapTable({
        data: data_one
      });
    });

    $('#data2').on('click', function(event) {
      $('#table').bootstrapTable({
        data: data_two
      });
    });
  });
  </script>
</head>

<body>
  <header>
    <div class="jumbotron">
      <div class="container">
        <h3>Test</h3>
      </div> 
    </div> 
  </header>
  <div class="container">
    <div class="row">
      <div class="text-center">
      <a class="btn btn-large btn-success" id="data1">Data 1</a>
      <a class="btn btn-large btn-success" id="data2">Data 2</a>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <table id="table" class="table table-bordered" data-search="true" data-show-toggle="true">
        <thead>
          <tr>
            <th data-field="id" data-sortable="true">ID</th>
            <th data-field="name" data-sortable="true">Name</th>
            <th data-field="prices" data-sortable="true">Price</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>


  <footer>
    <div class="container">
      <hr>
      <p><small><a href="www.google.com">Google</a> didn't help me</small></p>
    </div>
  </footer>
</body> 
</html>

data1.json：

var data_one = [
  {
    "id": 0,
    "name": "test0",
    "prices": [
      "$0",
      "$5"
    ]
  },
  {
    "id": 1,
    "name": "test1",
    "prices": [
      "$4",
      "$1"
    ]
  },
  {
    "id": 2,
    "name": "test2",
    "prices": [
      "$2",
      "$3"
    ]
  },
];

data2.json：

var data_two = [
  {
    "id": 4,
    "name": "test4",
    "prices": [
      "$1",
      "$2"
    ]
  },
  {
    "id": 5,
    "name": "test5",
    "prices": [
      "$6",
      "$5"
    ]
  },
  {
    "id": 6,
    "name": "test6",
    "prices": [
      "$9",
      "$7"
    ]
  },
];

Answer 1

您需要指定＆＃39;加载＆＃39;更新表格中的数据时的方法：

<script>
  $(function () {
    $('#table').bootstrapTable({ data: data_one });

    $('#data1').on('click', function(event) {
      $('#table').bootstrapTable('load', { data: data_one });
    });

    $('#data2').on('click', function(event) {
      $('#table').bootstrapTable('load', { data: data_two });
    });
  });
</script>

由于某种原因，您最初无法使用加载方法加载数据，只能更新。您还可以使用＆＃34;追加＆＃34;附加数据。方法，做很多很酷的东西。在这里查看文档：{{3}}

Answer 2

1）您不需要所有ready个函数，只需要一个函数（看起来像$(function () {..}的函数）。

2）此外，当您单击按钮时，您不会再次调用该元素上的插件 - 您必须明确地这样做。

3）最后，您没有向第二个按钮添加事件监听器 - 您在第一个按钮上添加了一个重复的监听器。

4）您应该从HTML按钮中删除内联onclick="data1()"和onclick="data2()"。

$(function () {

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

  $('#data1').on('click', function(event) {
    $('#table').bootstrapTable({
      data: data_one
    });
  });

  $('#data2').on('click', function(event) {
    $('#table').bootstrapTable({
      data: data_two
    });
  });

});

Answer 3

您没有集成data2（）函数。您可以编写如下代码。

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

function data1(){
    $('#table').bootstrapTable({
      data: data_one
    });
}
function data2(){
    $('#table').bootstrapTable({
      data: data_two
    });
}

单击按钮更改加载到表中的JSON文件

3 个答案: