深入了解Bootstrap table表格外掛程式（一）-js教程-PHP中文網

深入了解Bootstrap table表格外掛程式（一）

零下一度

發布： 2017-05-19 09:21:01

原創

1550 人瀏覽過

这篇文章主要为大家介绍了第一次学习Bootstrap table表格插件的笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

第一次使用Bootstrap-table这个表格插件，记录一下使用过程中遇到的问题。

|引入CSS文件

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

登入後複製

|引入相关库

我们需要引入Jquery库、bootstrap库、以及bootstrap-table.js文件

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<-- put your locale files after bootstrap-table.js -->
<script src="bootstrap-table-zh-CN.js"></script>

登入後複製

|启用Bootstrap Table插件：

官方文档中给出了我们有两种那个方式来启用bootstrap-table插件：

1、通过data属性的方式：

<table data-toggle="table">
 <thead>
 <tr>
  <th>Item ID</th>
  <th>Item Name</th>
  <th>Item Price</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>1</td>
  <td>Item 1</td>
  <td>$1</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Item 2</td>
  <td>$2</td>
 </tr>
 </tbody>
</table>

登入後複製

2、通过js的方式：

//只需要HTML中写下table标签，并设置id
<table id="table"></table>

登入後複製

$(&#39;#table&#39;).bootstrapTable({
 columns: [{
 field: &#39;id&#39;,　　　　
 title: &#39;Item ID&#39;
 }, {
 field: &#39;name&#39;,
 title: &#39;Item Name&#39;
 }, {
 field: &#39;price&#39;,
 title: &#39;Item Price&#39;
 }],
 data: [{
 id: 1,
 name: &#39;Item 1&#39;,
 price: &#39;$1&#39;
 }, {
 id: 2,
 name: &#39;Item 2&#39;,
 price: &#39;$2&#39;
 }]
});

登入後複製

也可以通过url获取数据

$(&#39;#table&#39;).bootstrapTable({
 url: &#39;data1.json&#39;,
 columns: [{
 field: &#39;id&#39;,　　　　//与返回值的JSON数据的key值对应
 title: &#39;Item ID&#39;　　//列名
 }, {
 field: &#39;name&#39;,
 title: &#39;Item Name&#39;
 }, {
 field: &#39;price&#39;,
 title: &#39;Item Price&#39;
 }, ]
});

登入後複製

【相关推荐】

1. 免费js在线视频教程

2. JavaScript中文参考手册

3. php.cn独孤九贱（3）－JavaScript视频教程

以上是深入了解Bootstrap table表格外掛程式（一）的詳細內容。更多資訊請關注PHP中文網其他相關文章！