En savoir plus sur le plug-in de table Bootstrap (1)-js tutoriel-php.cn

En savoir plus sur le plug-in de table Bootstrap (1)

零下一度

Libérer： 2017-05-19 09:21:01

original

1555 Les gens l'ont consulté

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

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

|引入CSS文件

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

Copier après la connexion

|引入相关库

我们需要引入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>

Copier après la connexion

|启用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>

Copier après la connexion

2、通过js的方式：

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

Copier après la connexion

$(&#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;
 }]
});

Copier après la connexion

也可以通过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;
 }, ]
});

Copier après la connexion

【相关推荐】

1. 免费js在线视频教程

2. JavaScript中文参考手册

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!