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

如何在下面的代码中添加静态JSON数据而不是动态数据url以填充网格？基本上我有静态数据而不是动态数据。如何添加json数据而不是data-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>

感谢

来源

2017-08-30 Kathir

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

要运行库这种方式，你将需要：

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

由于代码片段工具的限制，我无法包含完整的5,000个结果。但我已经测试过它，并且加载速度与之前一样快。

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>

来源

2017-08-31 04:08:32 fjoe

优秀!!!!真棒！ – Kathir

如果我理解正确的话，你要使用json没有Ajax调用（静态数据）。你看过examples吗？到load和append数据

<script> 
    var json = '[{ "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" }]' 
    var data = JSON.parse(json); 
    var $table = $('#table'); 
    $table.bootstrapTable({data: data});   
    </script>

它也有可能 - 只是看documentation：

删除您data-toggle="table"属性，尝试下面的脚本。

来源

2017-08-30 20:23:07 ventiseis

u能解决上面的例子中，如何解决呢？ – Kathir

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

回答

相关问题