用这个库 3 分钟实现让你满意的表格功能:Bootstrap-Table

本文作者:HelloGitHub-kalifun

这是 HelloGitHub 推出的《讲解开源项目》系列,今天给大家推荐一个基于 Bootstrap 和 jQuery 的表格插件:Bootstrap-Table

一、介绍

从项目名称就可以知道,这是一款 Bootstrap 的表格插件。表格的展示的形式所有的前端几乎在工作中都有涉及过,Bootstrap Table 提供了快速的建表、查询、分页、排序等一系列功能。

项目地址:https://github.com/wenzhixin/bootstrap-table

可能 Bootstrap 和 jQuery 技术有些过时了,但如果因为历史的技术选型或者旧的项目还在用这两个库的话,那这个项目一定会让你的嘴角慢慢上扬,拿下表格展示方面的需求易如反掌!

二、模式

Boostatrp Table 分为两种模式:客户端(client)模式、服务端(server)模式。

  • 客户端:通过数据接口将服务器需要加载的数据一次性展现出来,然后装换成 json 然后生成 table。我们可以自己定义显示行数,分页等,此时就不再会向服务器发送请求了。
  • 服务器:根据设定的每页记录数和当前显示页,发送数据到服务器进行查询。

三、实战操作

Tips: 解释说明均在代码中以注释方式展示,请大家注意阅读。

我们采用的是最简单的 CDN 引入方式,代码可直接运行。复制代码并将配置好 json 文件的路径即可看到效果。

3.1 快速上手

注释中的星号表示该参数必写,话不多说上代码。示例代码:

上面的代码展示通过基本 API 实现基础的功能,示例代码并没有罗列所有的 API。该库还有很多好玩的功能等着大家去发现,正所谓师父领进门修行靠个人~

3.2 拆解讲解

下面对关键点进行阐述,为了更方便使用的小伙伴清楚插件的用法。

3.2.1 初始化部分

3.2.2 阅读数据部分

  • field json 中键值对中的 Key
  • title 是表格头显示的内容
  • formatter 是一个函数类型,当我们对数据内容需要修改时会用它。例:编码转换

3.2.3 事件触发器

因为很多时候我们需要针对表格进行处理,所以事件触发器是一个不错的选择。比如:它可以记录我们的行数据,可以利用触发器进行定制函数的执行等。

四、扩展

介绍几个扩展可以让我们便捷的实现更多的表格功能,而不需要自己造轮子让我们的工作更加高效(也可以进入官网查看扩展的具体使用方法,官方已经收集了大量的扩展)。老规矩直接上代码:

4.1 表格导出

4.2 自动刷新

4.3 复制行

五、总结

本篇文章只是简单的阐述 Bootstrap-Table 如何使用,正在对表格功能实现而忧愁的小伙伴,可以使用 HelloGitHub 推荐的这款插件。你会发现网页制作表格还可以如此快捷,期待小伙伴挖掘出更加有意思的功能哦。

注:上面 js 部分并没有采用函数形式,建议在使用熟悉之后还是采用函数形式,这样也方便复用及让代码看起来更加规范。

参考资料

[1]《讲解开源项目》: https://github.com/HelloGitHub-Team/Article

[2]Bootstrap-Table 项目地址: https://github.com/wenzhixin/bootstrap-table

[3]Bootstrap-Table 官方文档: https://bootstrap-table.com/docs/getting-started/introduction/

『讲解开源项目系列』——让对开源项目感兴趣的人不再畏惧、让开源项目的发起者不再孤单。跟着我们的文章,你会发现编程的乐趣、使用和发现参与开源项目如此简单。欢迎留言联系我们、加入我们,让更多人爱上开源、贡献开源~

HTML标签之表格标签

表格是页面中常见的一中标签,通常是用来数据展示的,而不是用来布局。

  • 语法

<table>

<tr>

<td>单元格内的文字</td>

</tr>

</table>

  • 说明
    • table 标签:定义一个表
    • tr 标签:定义表格中的一行,必须嵌套在table标签中,有几对,表示表格有几行
    • td 标签:定义表格中的单元格,必须嵌套在标签中,一对 中包含几对,就表示该行中有多少列(或多少个单元格)
  • 注意
    • 中只能嵌套
    • 标签,就像一个容器,可以容纳所有的元素

设置表格的外观样式

  • 说明
  • 表头一般位于表格的第一行或第一列,其文本加粗居中,如下图所示,即为设置了表头的表格。设置表头非常简单,只需用表头标签<th></th>替代相应的单元格标签<td></td>即可
  • 示例
  • 代码

<table border=1>

<tr>

<th>姓名</th>

<th>性别</th>

<th>电话</th>

</tr>

<tr>

<th>张三</th>

<td>女</td>

<td>18611110000</td>

</tr>

<tr>

<th>李四</th>

<td>男</td>

<td>18711110000</td>

</tr>

<tr>

<th>王五</th>

<td>男</td>

<td>18811110000</td>

</tr>

</table>

表格标题标签,为表格添加标题,跟随表格的位置而移动。设置标题,我们用的是caption标签。

  • 语法

<table border=\”1\”>

<caption style=\”text-align:left\”>My savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

</tr>

</table>

  • 说明

将标题定位在表格的左|右|上|下位置。

  • 示例
  • 分类

跨行合并 rowspan=“合并单元格的个数”

跨列合并 colspan=“合并单元格的个数”

合并顺序:先上后下,先左后右

  • 代码

“`

  • 合并方法:

(1)先确定是跨行还是跨列合并

(2)根据先上后下,先左后右的原则,找到目标单元格,写上合并方式(rowspan/colspan)和要合并的单元格数量

(3)删除多余的单元格

表格的结构划分,使用thead、tbody 、tfoot 三种标签

  • 说明
  • 标签用于组合 HTML 表格的表头内容 元素应该与和元素结合起来使用,用来规定表格的各个部分(表头、主体、页脚)
  • 语法

<table border=\”1\”>

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tfoot>

<tr>

<td>Sum</td>

<td>$180</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$80</td>

</tr>

</tbody>

</table>

  • 提示

(1) 元素内部必须包含一个或者多个 标签。

(2) thead, tbody, 和 tfoot 元素默认不会影响表格的布局。用途主要是可以使用 CSS 来为这些元素定义样式,从而改变表格的外观。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场,未经允许不得转载。