深入了解Bootstrap table表格插件（一）-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

深入了解Bootstrap table表格插件（一）

零下一度

May 19, 2017 am 09:21 AM

bootstrap

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

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

|引入CSS文件

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

Salin selepas log masuk

|引入相关库

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

Salin selepas log masuk

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

Salin selepas log masuk

2、通过js的方式：

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

【相关推荐】

1. 免费js在线视频教程

2. JavaScript中文参考手册

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

Atas ialah kandungan terperinci 深入了解Bootstrap table表格插件（一）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn