Question

如何在下面的代码中添加静态JSON数据而不是动态数据url来填充网格？基本上我有静态数据而不是动态数据。

<html> 
  <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/export/bootstrap-table-export.min.js"></script>
  </head>
  <body>
    <table data-toggle="table"
      data-search="true"
      data-show-refresh="true"
      data-show-toggle="true"
      data-show-columns="true"
      data-show-export="true"
      data-minimum-count-columns="2"
      data-show-pagination-switch="true"
      data-pagination="true"
      data-id-field="id"
      data-page-list="[10, 25, 50, 100, ALL]"
      data-show-footer="false"
      data-side-pagination="client"
      data-url="https://jsonplaceholder.typicode.com/photos">
      <thead>
        <tr>
          <th data-field="id">Id</th>
          <th data-field="title">Title</th>
          <th data-field="url">URL</th>
          <th data-field="thumbnailUrl">Thumbnail URL</th>
        </tr>
      </thead>
  </body>     
</html>

由于

Answer 1

我会将JSON数据作为常量变量放在JavaScript文件中，然后在加载表时引用它。

要以这种方式运行库，您需要：

删除数据表属性。
在HTML表格中添加ID。
添加对数据，表格和库的调用。

由于代码段工具的限制，我无法包含完整的5,000个结果。但是我已经对它进行了测试，它的加载速度和以前一样快。

＆＃13;

const myData =
[
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "http://placehold.it/600/92c952",
    "thumbnailUrl": "http://placehold.it/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "http://placehold.it/600/771796",
    "thumbnailUrl": "http://placehold.it/150/771796"
  },
  {
    "albumId": 1,
    "id": 3,
    "title": "officia porro iure quia iusto qui ipsa ut modi",
    "url": "http://placehold.it/600/24f355",
    "thumbnailUrl": "http://placehold.it/150/24f355"
  },
  {
    "albumId": 1,
    "id": 4,
    "title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",
    "url": "http://placehold.it/600/d32776",
    "thumbnailUrl": "http://placehold.it/150/d32776"
  },
  {
    "albumId": 1,
    "id": 5,
    "title": "natus nisi omnis corporis facere molestiae rerum in",
    "url": "http://placehold.it/600/f66b97",
    "thumbnailUrl": "http://placehold.it/150/f66b97"
  },
  {
    "albumId": 1,
    "id": 6,
    "title": "accusamus ea aliquid et amet sequi nemo",
    "url": "http://placehold.it/600/56a8c2",
    "thumbnailUrl": "http://placehold.it/150/56a8c2"
  },
  {
    "albumId": 1,
    "id": 7,
    "title": "officia delectus consequatur vero aut veniam explicabo molestias",
    "url": "http://placehold.it/600/b0f7cc",
    "thumbnailUrl": "http://placehold.it/150/b0f7cc"
  },
  {
    "albumId": 1,
    "id": 8,
    "title": "aut porro officiis laborum odit ea laudantium corporis",
    "url": "http://placehold.it/600/54176f",
    "thumbnailUrl": "http://placehold.it/150/54176f"
  },
  {
    "albumId": 1,
    "id": 9,
    "title": "qui eius qui autem sed",
    "url": "http://placehold.it/600/51aa97",
    "thumbnailUrl": "http://placehold.it/150/51aa97"
  },
  {
    "albumId": 1,
    "id": 10,
    "title": "beatae et provident et ut vel",
    "url": "http://placehold.it/600/810b14",
    "thumbnailUrl": "http://placehold.it/150/810b14"
  }
];

＆＃13;

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/export/bootstrap-table-export.min.js"></script>
  
  <!-- I would include the data as a constant in a JavaScript file. -->
  <script src="above.js"></script>
  <script>
    $(function () {
      $("#myTable").bootstrapTable({ data: myData });
    });
  </script>
</head>

<body>
  <table id="myTable"
       data-search="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-show-export="true"
       data-minimum-count-columns="2"
       data-show-pagination-switch="true"
       data-pagination="true"
       data-id-field="id"
       data-page-list="[10, 25, 50, 100, ALL]"
       data-show-footer="false"
       data-side-pagination="client">
    <thead>
      <tr>
        <th data-field="id">Id</th>
        <th data-field="title">Title</th>
        <th data-field="url">URL</th>
        <th data-field="thumbnailUrl">Thumbnail URL</th>
      </tr>
    </thead>
</body>

</html>

＆＃13;

Answer 2

If I understand you correctly, you want to use #include <iostream> #include <string> using namespace std; class Student { string name; //Name string* classList = NULL; //Empty array to store class names in int numClasses = 0; //Number of classes public: void InputData() { cout << "Enter student name: " << endl; //Input Name cin >> name; cout << "Enter number of classes: " << endl; //Input classes cin >> numClasses; classList = new string[numClasses]; //Define array size for (int i = 0; i < numClasses; i++) //For every spot in array, name class { cout << "Enter name of class " << (i + 1) << ":" << endl; //Name class cin >> classList[i]; } }; void OutputData() { cout << "Name: " << name << endl; //Output data cout << "Number of Classes: " << numClasses << endl; for (int i = 0; i < numClasses; i++) //Cycle through and output classes { cout << "Class " << i << ": " << classList[i] << endl; } }; void ResetClasses() { name = ""; delete[] classList; //Free Memory classList = NULL; //Clear array numClasses = 0; }; Student operator =(Student& student) //Overload = { this->name = student.name; this->classList = student.classList; this->numClasses = student.numClasses; return *this; }; }; int main() { Student s1, s2; s1.InputData(); // Input data for student 1 cout << "Student 1's data:" << endl; s1.OutputData(); // Output data for student 1 s2 = s1; cout << "Student 2's data after assignment from student 1:" << endl; s2.OutputData(); // Should output same data as for student 1 s1.ResetClasses(); cout << "Student 1's data after reset:" << endl; s1.OutputData(); // Should have no classes cout << "Student 2's data, should still have original classes:" << endl; s2.OutputData(); // Should still have original classes } without an ajax call (static data). Did you look at the examples?

Remove your void ResetClasses() { name = ""; delete[] classList; //Free Memory classList = NULL; //Clear array numClasses = 0; }; Student operator =(Student& student) //Overload = { this->name = student.name; this->classList = student.classList; this->numClasses = student.numClasses; return *this; }; attribute and try the following script:

Enter student name:
ERIC
Enter number of classes:
2
Enter name of class 1:
C++
Enter name of class 2:
C
Student 1's data:
Name: ERIC
Number of Classes: 2
Class 0: C++
Class 1: C
Student 2's data after assignment from student 1:
Name: ERIC
Number of Classes: 2
Class 0: C++
Class 1: C
Student 1's data after reset:
Name:
Number of Classes: 0
Student 2's data, should still have original classes:
Name: ERIC
Number of Classes: 2
Class 0:
Class 1:

Its also possible to json and data-toggle="table" data - just look at the documentation.

如何添加json数据而不是data-url来填充网格？

2 个答案: