如何添加json数据而不是data-url来填充网格? [英] How to add json data instead of data-url to populate the grid?
本文介绍了如何添加json数据而不是data-url来填充网格?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在下面的代码中添加静态JSON数据而不是动态data-url来填充网格?基本上，我有静态数据，而不是动态数据.
How do I add static JSON data instead of dynamic data-url in the code below to populate the grid? Basically I have static data instead of dynamic.
<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>
谢谢
推荐答案
我将JSON数据作为常量变量放置在JavaScript文件中，然后在加载表时引用它.
I would place the JSON data inside a JavaScript file as a constant variable and then reference it when I load the table.
要以这种方式运行库，您将需要:
To run the library this way you will need to:
- 删除数据表属性.
- 向您的HTML表添加ID.
- 添加对数据，表和库的调用.
由于摘要工具的局限性，我无法包含全部5,000个结果.但是我已经对其进行了测试，它的加载速度和以前一样快.
Due to a limitation of the snippet tool I cannot include the full 5,000 results. But I have tested it and it loads just as quickly as before.
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"
}
];
<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>
这篇关于如何添加json数据而不是data-url来填充网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
