整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

用这个库 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 快速上手

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hello, Bootstrap Table!</title>
 // 引入 css
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
</head>
<body>
 // 需要填充的表格
 <table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>
// 引入js
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script>
 window.operateEvents = {
 // 当点击 class=delete 时触发
 'click .delete': function (e,value,row,index) {
 // 在 console 打印出整行数据
 console.log(row);
 }
 };

 $('#tb_departments').bootstrapTable({
 url: '/frontend/bootstrap-table/user.json', //请求后台的 URL（*）
 method: 'get', //请求方式（*）
 // data: data, //当不使用上面的后台请求时，使用data来接收数据
 toolbar: '#toolbar', //工具按钮用哪个容器
 striped: true, //是否显示行间隔色
 cache: false, //是否使用缓存，默认为 true，所以一般情况下需要设置一下这个属性（*）
 pagination: true, //是否显示分页（*）
 sortable: false, //是否启用排序
 sortOrder: "asc", //排序方式
 sidePagination: "client", //分页方式：client 客户端分页，server 服务端分页（*）
 pageNumber:1, //初始化加载第一页，默认第一页
 pageSize: 6, //每页的记录行数（*）
 pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
 search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以个人感觉意义不大
 strictSearch: true, //启用严格搜索。禁用比较检查。
 showColumns: true, //是否显示所有的列
 showRefresh: true, //是否显示刷新按钮
 minimumCountColumns: 2, //最少允许的列数
 clickToSelect: true, //是否启用点击选中行
 height: 500, //行高，如果没有设置 height 属性，表格自动根据记录条数觉得表格高度
 uniqueId: "ID", //每一行的唯一标识，一般为主键列
 showToggle:true, //是否显示详细视图和列表视图的切换按钮
 cardView: false, //是否显示详细视图
 detailView: false, //是否显示父子表
 showExport: true, //是否显示导出
 exportDataType: "basic", //basic', 'all', 'selected'.
 columns: [{
 checkbox: true //复选框标题，就是我们看到可以通过复选框选择整行。
 }, {
 field: 'id', title: 'ID' //我们取json中id的值，并将表头title设置为ID
 }, {
 field: 'username', title: '用户名' //我们取 json 中 username 的值，并将表头 title 设置为用户名
 },{
 field: 'sex', title: '性别' //我们取 json 中 sex 的值，并将表头 title 设置为性别
 },{
 field: 'city', title: '城市' //我们取 json 中 city 的值，并将表头 title 设置为城市
 },{
 field: 'sign', title: '签名' //我们取 json 中 sign 的值，并将表头 title 设置为签名
 },{
 field: 'classify', title: '分类' //我们取 json 中 classify 的值，并将表头 title 设置为分类
 },{
 //ormatter:function(value,row,index) 对后台传入数据 进行操作 对数据重新赋值 返回 return 到前台
 // events 触发事件
 field: 'Button',title:"操作",align: 'center',events:operateEvents,formatter:function(value,row,index){
 var del = '<button type="button" class="btn btn-danger delete">删除</button>'
 return del;
 }
 }
 ],
 responseHandler: function (res) {
 return res.data //在加载远程数据之前，处理响应数据格式.
 // 我们取的值在data字段中，所以需要先进行处理，这样才能获取我们想要的结果
 }
 });
</script>
</body>
</html>

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

3.2 拆解讲解

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

3.2.1 初始化部分

选择需要初始化表格。
$('#tb_departments').bootstrapTable({})
这个就像table的入口一样。
<table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>

3.2.2 阅读数据部分

columns:[{field: 'Key', title: '文件路径',formatter: function(value,row,index){} }]
  • field json 中键值对中的 Key
  • title 是表格头显示的内容
  • formatter 是一个函数类型，当我们对数据内容需要修改时会用它。例：编码转换

3.2.3 事件触发器

events:operateEvents
 window.operateEvents = {
 'click .download': function (e,value,row,index) {
 console.log(row);
 }
 }

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

四、扩展

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

4.1 表格导出

<script src="js/bootstrap-table-export.js"></script> 
showExport: true, //是否显示导出
exportDataType: basic,								 //导出数据类型，支持：'基本'，'全部'，'选中'
exportTypes:['json', 'xml', 'csv', 'txt', 'sql', 'excel'] //导出类型

4.2 自动刷新

<script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script>
autoRefresh: true, 							 //设置 true 为启用自动刷新插件。这并不意味着启用自动刷新
autoRefreshStatus: true,						//设置 true 为启用自动刷新。这是表加载时状态自动刷新
autoRefreshInterval: 60,						//每次发生自动刷新的时间（以秒为单位）
autoRefreshSilent: true							//设置为静默自动刷新

4.3 复制行

<script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script>
showCopyRows: true,									//设置 true 为显示复制按钮。此按钮将所选行的内容复制到剪贴板
copyWithHidden: true,								//设置 true 为使用隐藏列进行复制
copyDelimiter: ', ',								//复制时，此分隔符将插入列值之间
copyNewline: '\n'									//复制时，此换行符将插入行值之间

五、总结

本篇文章只是简单的阐述 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/

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

使用el-table加载数据后，如果通过一些操作更新了el-table绑定的data中的部分数据，想要将更新的数据及时更新在界面上，应该怎么做呢？

假如我们是通过for循环更新了data中某一行某一列的数据，代码如下：

for(var i=0;i<that.tableData.length;i++){
	var aId=that.tableData[i].stationid;
	var bId=that.tableData[i].deviceid;

	if(aId==that.selectStationId&&bId==that.selectDeviceId){
		that.tableData[i].physicalid=physicalId;
	}
}

上面的代码已经修改了data的部分数据，但是这样新的数据是不能更新在界面上的。<br/>

我们可以新建一个data数组对象，将旧的data修改后的数据一行一行地赋值给新的data数组对象，然后将新的data数组对象

绑定到el-table的data上面就可以将新的数据及时更新在界面上，代码如下：

Thyemlef动态刷新页面方法

最近在做项目，后端使用SSM架构，前端使用thymeleaf和bootstrap架构，在作用过程中，需要页面局部刷新，用到了3种方法，分别进行一下介绍。

## 一、bootstrap模态框

在管理员界面对员工进行修改时，一般都展示出清单，管理员可以在清单上对员工进行修改或其它操作，在本程序中，用到了添加员工、编辑员工信息，都采用弹出模态框的方法。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200317205301229.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aml6ZQ==,size_16,color_FFFFFF,t_70)

实现的代码如下：

1、按钮功能实现

```javascript

添加与编辑用户按钮，指出模态框，并在jquery也没有函数中对输入框赋值。

<input type="button" value="添加用户" data-toggle="modal" data-target="#addUserModal" class="btn btn-info" style="margin-left: 10px"/>

编辑按钮中，还需要将对象参数传递进去，以便修改正确的人员

<div class="btn btn-default btn-group-xs" role="group" aria-label="修改"

th:id="${'user-modify-'+record.id}"

th:edit-data-id="${record.id}"

data-toggle="modal" data-target="#addUserModal"

onclick="return get_employee_info(this)">编辑

</div>

```

2、JQERY函数实现

函数中根据按钮参数，通过ajax从后台获取数据，并显示模态框上。

```javascript

function get_employee_info(e) {

var id = e.getAttribute("edit-data-id");

if (!id) {

alert('Error！');

return false;

}

$.ajax(

{

url: "/getEmployee",

data: {"id": id},

type: "get",

beforeSend: function () {

//$("#tip").html("<span style='color:blue'>正在处理...</span>");

return true;

},

success: function (data) {

if (data) {

// 解析json数据

var data_obj = data;

// 赋值

$("#id").val(data_obj.id);

$("#name").val(data_obj.name);

$("#department").val(data_obj.department);

$("#section").val(data_obj.section);

$("#cardId").val(data_obj.cardId);

$("#mobilePhone").val(data_obj.mobilePhone);

$("#managerLevel").val(data_obj.managerLevel);

$("#company").val(data_obj.company);

$("#manageDepartment").val(data_obj.manageDepartment);

} else {

$("#tip").html("<span style='color:red'>失败，请重试</span>");

// alert('操作失败');

}

},

error: function () {

alert('请求出错');

},

complete: function () {

// $('#tips').hide();

}

});

return false;

}

```

3、模态框实现代码

```javascript

<!-- 模态框示例（Modal1） -->

<form method="post" action="" class="form-horizontal" role="form" id="employee" onsubmit="return edit_employee()"

style="margin: 10px;">

<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"

aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">

×

</button>

<h4 class="modal-title" id="myModalLabel">

用户信息

</h4>

</div>

<div class="modal-body">

<form class="form-horizontal" role="form">

<div class="form-group">

<label for="id" class="col-sm-3 control-label">用户ID</label>

<div class="col-sm-9">

<input type="text" class="form-control" id="id" name="id" readonly>

</div>

</div>

<div class="form-group">

</div>

***。。。中间省略其它字段。。。***

</form>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal" style="margin-left: 200px">

关闭

</button>

<button type="submit" class="btn btn-primary" >

提交

</button>

<span id="tip"> </span>

</div>

</div><!-- /.modal-content -->

</div><!-- /.modal -->

```

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200317211240162.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aml6ZQ==,size_16,color_FFFFFF,t_70)

## 二、th:fragment代码段

fragment代码段，可以用jquery局部刷新

```javascript

<!--明细清单，做成点南上面图标时局部刷新-->

<div class="statList" th:fragment="statList" id="statList">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

<table class="table table-bordered table-hover table-responsive">

<thead>

...省略其它代码。

</div>

```

下面是更新代码， 上面代码段名称为： $(".statList").html(data);，下面函数是统计图标的点击后，触发查询功能，对统计图表的数据进行下钻查询。功能是通过ajax获取后端数据，然后在前端显示。

```javascript

function refreshStatList(codeColor) {

var department = $('#departmentList').val();

$.ajax({

type: "post",

async: true,

url: "/statQueryList",

data: {

"department": department,

"codeColor": codeColor

},

success: function (data) {

$(".statList").html(data);

//将选择值保存到而面，供导出时使用

$("#selectCodeColor").val(codeColor);

},

error: function (errorMsg) {

//请求失败时执行该函数

alert("局部刷新失败!");

}

})

}

```

## 三、ajax局部刷新

利用jquery函数，利用ajax需要时从后台获取数据，然后通过前端对象名，对相应内容赋值，实现局部刷新。

```objectivec

$("#tip").html("<span style='color:blue'>正在处理...</span>");

//给日期字段赋值,只能取前面年月日，并以-号分隔，否则前端不回显

if (data_obj.quarantineStart != null) {

$("#quarantineStart").val(data_obj.quarantineStart.substring(0, 10));

} else {

$("#quarantineStart").val(null);

}

```

老伍，2020.3.17


在线咨询
上一篇：HTML样式：好看的颜色字体是有方法的
下一篇：使用Python将HTML转成PDF

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 管城回族区 定襄县 夏县 岳阳县 兴宁市 金平苗族瑶族傣族自治县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服