如何快速将线下表格数据线上化

向作者提问
自由产品人,具备全栈开发经验,之前在一家大型集团企业大学负责培训运营数据平台的搭建。微信公众账号:个人学习。
查看本场Chat

在传统企业中,存在很多线下 Excel 数据处理以及汇总的工作,有没有一种方式快速将线下 Excel 数据搬到线上,这是我近期一直在尝试解决的问题,这个工作,我们通常要拆成前台和后台,前台实现数据的录入,后台实现数据管理功能。一般的后台管理平台,通常会使用一些 Web 表格的框架,从数据库中拉取数据,最终在页面上呈现出表格样式。

这里我要分享的是,Web 开发中,几个前端表格框架的介绍及使用,其中包括:

  • Tabledit :针对普通表格,快速实现编辑及删除的工作;
  • Bootstrap-Table:相对定制化的一个 Bootstrap 线上表格框架,其功能较全面;
  • Datatables:更加完整的一个线上表格处理方案,具备较完整的功能。

这些框架基本满足了 Web 表格的所有需求,特别是 Datatables,几乎提供了一套完备的解决方案,拆分为基础模块以及编辑模块,只是编辑模块并非免费的,不过没关系,这里我也会简单介绍一下,如何自己优雅的实现表格编辑的需求。

引言

开始之前,需要申明的是,由于框架内容较多,不可能每个参数都讲到,这里会以实际项目需求为例,重点介绍,前台后台如何传参及数据如何传递。

首先看一下,我使用的前端以及后端的一些开发框架,如果你并非使用该语言开发,没关系,重点关注前端即可,不影响阅读。

  • Web 框架Express ,这是一个基于 Node.js 平台的开发框架。
  • 模版引擎EJS,一个嵌入式 JavaScript 模板引擎,使用它仅仅是因为跟 HTML 很相似,并且容易理解。
  • 前端框架:jQuery & Bootstrap 3,样式库选择的是 Bootstrap 3,这个相对比较主流,Bootstrap-Table 是基于 Bootstrap 的,这点要注意下,使用其他样式库,可能会出现不兼容的情况;Datatables 相对完善,不仅支持 Bootstrap 3,还支持 Bootstrap 4,Foundation 及 Semantic UI 等。
  • 数据库:这里不涉及数据库的操作,但是数据会由后台路由模拟生成,并不是直接写在页面中。

点击这里 ,可以查看示例代码。

Tabledit

这是个轻量级、快速实现编辑以及删除功能的表格框架,应用场景更多在简单表格的快速处理上,轻量是它的优点也是它的缺点,功能比较单一,但贵在神速。

1. 准备

Tabledit 应用场景限于一些简单的配置表修改,主要功能是表格的快速处理,要在现有的表格上才能发挥作用,不支持生成表格数据。但是,通常情况下,我们的表格数据都是来源于后台,为了更贴近实际情况,我简单模拟了一下,在后台路由端生成表格数据,然后传到前台,HTML 部分代码如下:

...
<table class="table table-bordered table-striped">
  <tr>
      <th>#</th>
      <th>公司</th>
      <th>地点</th>
      <th>负责人</th>
      <th>人员数</th>
      <th>备注</th>
  </tr>
  <% for(var i = 0 ; i < dataList.length; i++){ %>
    <tr>
      <td class="hidden"><%= dataList[i].id %></td>
      <td><%= i+1 %></td>
      <td><%= dataList[i].plant %></td>
      <td><%= dataList[i].place %></td>
      <td><%= dataList[i].owner %></td>
      <td><%= dataList[i].preparation %></td>
      <td><%= dataList[i].bz %></td>
    </tr>
  <% } %>
</table>
...

简单的一段 ejs 模版代码,其中 dataList 是后台传到前台的数据对象,经过前台渲染达到如下图所示效果:

简单看下后台路由实现方法:

由于采用不同语言,甚至是不同的框架,获取数据的方式会有所不同,这里你只需要关注两点:

  1. 数据是通过后台传到前台,并在前台渲染出来的;
  2. 数据的格式是一个包含 N 个 JSON 对象的数组;

2. 使用

在前台页面中,引入库文件,除了 jQuery 和 Bootstrap,加上 tabledit 的 js 库即可。

<!-- jQuery 3 -->
<script src="/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- tabledit -->
<script src="/javascripts/libs/jquery.tabledit.js"></script>

接下来,编写具体实现代码,下面一段代码基本包括了 tabledit 的所有功能要点。

$(function(){
  $('.table').Tabledit({
    url: '/tabledit/ajax',
    autoFocus: false,
    // hideIdentifier: true,   // 手动设置hidden 取代 hideIndentifier
    buttons: {
      edit:{
        action: 'edit'
      },
      delete: {
        action: 'delete'
      },
      confirm: {
        html: '确定?'
      },
      restore: {
        html: '取消',
      },
      save: {
        html: '保存?'
      }
    },
    columns: {
        identifier: [0, 'table_id'],  //  列从0开始,id是table的第0列
        editable: [[2, 'table_plant'],[3, 'table_place'], [4, 'table_owner'],[5, 'table_preparation'],[6, 'table_bz']]
    },
  });
});

样式方面的参数不多介绍,相信大家试一下基本就知道了,关键在传参。

  • url 定义的是访问路径
  • buttons 定义了 2 个动作,编辑和删除,action 是其中一个参数,当 action=='edit' 代表的是编辑操作,当 action=='delete' 代表的是删除操作
  • columns 定义了参数,一个是 id,一个编辑的表单参数,前面数字代表表格第几列(从 0 开始数),后面字符串代表参数名称,参数值自然为 value 值。

知道了这些,接下就好理解,当我们点击前台编辑按钮的时候,会显示编辑框,如下图:

修改完后,当我们点击保存时,触发 ajax 请求,请求地址为 url 中定义的路径,传的参数包含 id、action 以及所有的可编辑表格的参数。例如这里的参数列表为:

后台根据接收到的指令,直接处理请求即可。有一点需要注意的是,返回数据需是 JSON 格式。例如,我这里的代码如下:

// tabledit ajax operator
router.post('/ajax' , function(req,res,next){
  var action = req.body.action;
  var id = req.body.table_id;
  if(action == 'delete'){
      console.log('--------- you need do something to delete your data');
      res.send(JSON.stringify({message: 'delete ok'}));
  }else if(action == 'edit'){
      console.log('--------- you need do something to update your data');
      res.send(JSON.stringify({message: 'edit ok'}));
  }else if(action == 'restore'){
      console.log('--------- you need do something to restore your data');
      res.send(JSON.stringify({message: 'restore ok'}));
  }
});

好了,tabledit 的介绍就到这里,它的重点功能是,对已经存在的表格,快速进行编辑以及删除操作,需要注意的就是 id 参数以及 action 参数。

Bootstrap-Table

前面只是打个样,后面两个才是重量级的。Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件,功能比较完备,能够实现数据异步获取,编辑,排序等一系列功能,最可贵的是,只需要一些简单的配置就可以实现一个功能完备的在线表格。

1. 准备

不同于 tabledit,Bootstrap-Table 是提供异步获取数据功能的,这里的准备工作暂不用管前台页面结构。因为前台页面中表格部分,只需一句代码就解决了:

<table id="table"></table>

我们要重点关心的是,如何正确的引入 Bootstrap Table 的相关文件,功能越多意味着,需要加载的第三方库越多。

首先关注 3 个文件,dist 目录下的 bootstrap-table.cssbootstrap-table.js,如果使用中文,还要引用 locale/bootstrap-table-zh-CN.js注意每个文件均提供了min版本以及正常版本,建议在开发测试阶段引入正常版本,便于调试。当然最后不要忘了引入 bootstrap 以及 jQuery 的文件,引入情况如下:

<!-- CSS 部分 -->
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
<!-- Bootstrap table -->
<link rel="stylesheet" href="/bootstrap-table/dist/css/booststrap-table.min.css">

js 文件建议放到页面最底下,在 </body> 之前引入即可,如下所示:

<!-- JS 部分 -->
<!-- jQuery 3 -->
<script src="/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- bootstrap-table -->
<script src="/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

注意:1. 顺序不要乱;2. 根目录依据自己项目而定

2. 初步使用

前台放一个 table 标签即可,表格的结构,甚至于表格的操作都放到 JS 中实现,如下代码即可生成一个表格:

$('#table').bootstrapTable({
    url: '/data/test.data',        // 表格数据来源
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    },{
        field: 'column1',
        title: '列1'
    },{
        field: 'column2',
        title: '列2' 
    },{
        field: 'column3',
        title: '列3'
    },{
        field: 'column4',
        title: '列4'
    } ]
});

url 中定义了表格的数据来源,返回数据的格式依然是包含数据对象的数组,这点不再赘述。由于该框架提供的参数比较多,而实际项目中,并用不着这么多配置,这里给出,我建议的一个方案,供参考。

右上角的一些功能,通过配置一些参数即可实现,无需多余的代码。这个查看官方文档,基本不会有什么问题的。

左上角是一些自定义的一些功能,这里有添加数据,筛选数据(本地 & 异步),再加上编辑数据,基本就完成了表格的增删改查需求,这个我在后面会一一介绍。

3. 功能实现

这里我会介绍在实际项目中,比较实用的一些功能点。主要分为:添加,导出,筛选,搜索,编辑以及删除。

(1)添加功能

根据一些实际项目的经验,采用弹出模态框的方式,是最优雅的添加方式。如下图所示:

这个是 bootstrap 自带的一个插件,直接引入页面中即可,至于表单的提交方式是采用 form 原生提交,还是使用 ajax 异步提交,就取决于你的喜好了。这块内容不在文章范围内,就不多介绍了。

需要注意的是:假如你采用的是 ajax 异步提交表单,那么就需要调用 bootstrap-tablerefresh 方法,用来更新表格数据。

$('#table').bootstrapTable('refresh');
(2)导入功能

每次在做信息化类项目的时候,导出功能是我最不愿意去做,但也必须要实现的功能。不愿做并不是因为很难实现,这是一个原则问题,信息化就是为了减少或是废除线下操作,然而在传统企业却根本行不通,因为不管你的用户体验做得有多好,也改变不了用户「不愿尝试改变」的劣根性。

Bootstrap-Table 提供了导出扩展模块,简单配置就可以轻松实现导出功能。首先需要引入两个文件,一个是 Bootstrap-Tableextensions 中的 bootstrap-table-export 扩展;另一个是 tableExport 的插件。效果如下:

<!-- bootstrap-table export -->
<script src="/bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="/tableexport.jquery.plugin/tableExport.min.js"></script>

引入扩展文件后,在表格参数中加入如下一句配置即可:

showExport: true
(3)筛选功能

这个是在线表格最重要的功能之一。因为我们不可能一次性将后台所有数据都拉到前台展示。如果你之前使用过 Bootstrap-Table,你可能知道它提供了一个 sidePagination 的参数,这个参数是定义在哪里进行分页,可选值为 client 或者 server。默认为 client,当你设置为 server 时,每次请求后台服务器,都会加上 limit, offset, search, sort, order 这几个参数,传到后台让你去处理数据分页。

这里我想告诉你,完全没有必要这么麻烦,实际项目中,我们都是通过参数条件,筛选一部分数据展示到前台。所以你定义好默认的参数就可以了,分页的事就交给前端处理即可。那么参数如何自定义呢?使用 queryParams 表格参数即可。举个例子:

queryParams: function(params){
  return {
    startDate: '2018/09/01',
    endDate: '2019/09/01'
  };
},

查看 Chrome Network 请求,可以看出传递参数情况。

通过上述自定义参数方式,就可以筛选部分数据到前台,然后通过配置分页参数就可以实现前台分页了。那么一般设置什么参数筛选呢?也就是问一次性筛选多少条数据最合适呢?我的建议是在500以内,这样既方便处理数据,也不会太影响性能。

前台分页的好处,主要体现在搜索这块,完全不用自己去实现代码,简单配置搜索框即可,而且提供的是全局搜索,很强大。如果想配置个本地筛选也是很方便的,使用 resetSearch 方法即可。

// 本地筛选
$('#localFilter li a').click(function(e){
    e.preventDefault();
    var filter = $(this).data('filter');
    $table.bootstrapTable('resetSearch', filter);
});

有时候,我还是想要从后台数据库中筛选部分数据,通过前台表单,使用 refresh 方法即可。

// 异步筛选
$('#Filter').submit(function(e){
    e.preventDefault();
    var filter = $('input[name=filter]').val();
    $table.bootstrapTable('refresh',{
        query: {
          startDate: '2001/09/01',
          endDate: '2008/09/01',
          filter: filter
        }
    });
});

筛选功能就到这,这里只是介绍了参数传递的方法,具体实现还需要结合后台。

(4)搜索功能

搜索分为前台搜索以及后台搜索。

  • 前台搜索:学会使用5个表格参数(search、searchOnEnterKey、searchText、trimOnSearch、customSearch(自定义搜索)),2 个列参数(searchable、searchFormatter),1 个方法(resetSearch)即可
  • 后台搜索,就类似于筛选功能的传参了,在后台处理字符串,返回表格数据,此不在本文范围内,不多赘述。
(5)编辑功能

在线表格的编辑,其实是最不好处理的一个功能。一方面,添加编辑功能需要增加很多额外的代码量;另一方面,从业务上来讲,编辑并不是一个好的用户体验。在做编辑功能之前,我总是问自己,这块功能真的需要编辑吗?删除了重新添加行不行?

Bootstrap-Table 提供了 editable 编辑模块,简单配置即可实现表格的编辑,但是我还是想要提醒,使用编辑功能需要有节制,越自由并不代表用户体验越好。

还是老套路,引入 3 个文件(其中:1 个 css,2 个 js):

<!-- X-editable -->
<link rel="stylesheet" href="/X-editable/dist/bootstrap3-editable/css/bootstrap-editable.css">

<!-- booststrap-table editable -->
<script src="/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.js"></script>
<script src="/X-editable/dist/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

引入之后,直接在列参数上加上 editable: true,即可启用该字段的标记功能,效果图如下:

样式没有问题后,接下来看看如何使用,使用方法完全沿用了 X-editable 插件,bootstrap-table-editable 仅仅只是做了嵌入的工作,所以你需要查看 X-editable 的文档,这里我举个简单的例子介绍一下,下面为表格其中一列的参数设置:

{
  field: 'column2',
  title: '列2',
  editable: {
    url: '/test',
  },
}

url 参数用来异步访问后台,那么传递的参数有哪些呢?

pkX-editable 中定义为主键,在 Bootstrap-Table 中,通过设置表格参数 idField: 'id',可以定义行数据的主键。若改成 idField: 'name',再来看下:

明白了如何传参数,相信你就知道后面如何处理了。

(6)删除功能

介绍完编辑功能,不知道你有没有发现,假如我们要编辑的字段非常多,这种处理方式会给后台造成很大的工作量,能不能一个表单就解决编辑需求呢?当然是可以的。

我们在每一行的最后加上一列,放上一些功能按钮,如下图:

columns 表格参数中,加上一列如下:

{
    field: 'operator',
    title: '操作',
    align: 'center',
    valign: 'middle',
    width: '10%',
    // visible: false,
    formatter: function (value, row, index) {
        // var sid_code = base64encode(row.sid + '');   //  sid 加密处理
        // alert(sid_code);
        return '<a href="#">' + 
            '<i class="glyphicon glyphicon-eye-open" title="显示"></i> ' + 
            '</a>'+ 
            '<a href="#editProject" data-toggle="modal" title="修改">' + 
            '<i class="glyphicon glyphicon-pencil"></i> ' + 
            '</a>'+
            '<a href="javascript:void(0)" title="删除">' +
            '<i class="glyphicon glyphicon-trash text-danger"></i> ' + 
            '</a>';
    },
    events: {
      'click a[title=删除]': function (e, value, row, index) {
          if(confirm('此操作不可逆,请确认是否删除?')){
              $.ajax();
          }
      },
      'click a[title=修改]': function (e, value, row, index) {
          // e.preventDefault();
          alert('click change button');
      },
    }
}

4 个参数分别是:

  • event: the jQuery event.
  • value: the field value.
  • row: the row record data.
  • index: the row index.

相信看完这个示例,就能一并解决「查看」「编辑」「删除」等功能。Bootstrap-Table的使用就介绍到这里了,官方文档里还有好多参数以及方法没有介绍到,篇幅有限就不再介绍了,需自行查看文档学习。

Datatables

这是我见过最强大的在线表格插件了,官方文档也比较完整,建议直接看英文版本,初次看可能会有点逻辑混乱,但是多看看,每次都会有一些收获。这里我还是通过示例的方式,进行部分功能介绍。

1. 准备

不同于 Bootstrap-TableDatatables 的前台页面中需要定义表格的表头,否则将无法显示,代码如下:

<table id="table" class="table table-bordered table-striped">
  <thead>
    <tr>
      <th></th>
      <th>ID</th>
      <th>Item name</th>
      <th>Item price</th>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
      <th>列4</th>
      <th></th>
    </tr>
  </thead>
</table>

在前后各多出一列,后面会介绍它的用处。表头定义好后,接下来就是引入库文件了,1 个 css 文件,2 个 js 文件。如下:

<!-- DataTables css -->
<link rel="stylesheet" href="/datatables.net-bs/css/dataTables.bootstrap.min.css">

<!-- DataTables js-->
<script src="/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

js 文件依然还是放到最底下,</body> 之前即可,引入正确的库文件之后,准备工作就 OK 了。

2. 初步使用

Datatables 提供了 4 种获取表格数据的方式,这里只介绍:通过 Ajax 异步获取的方式。数据格式依然还是包含 JSON 对象的数组,而且跟之前是同一组数据,看下初步效果:

同样的配方,不一样的味道,js中代码实现如下:

$('#table').DataTable({
    ajax: {
        url: '/json/data.json',
        dataSrc: ''
    },
    columns: [
        { "data": null , defaultContent: '' },
        { "data": "id" },
        { "data": "name"},
        { "data": "price"},
        { "data": "column1" },
        { 'data': "column2" },
        { "data": "column3" },
        { "data": "column4" },
        { "data": null , defaultContent: ''}
    ]
});

这里需要注意的是:

  1. columns 参数中数组的对象数量,一定要跟前台表格中 th 保持一致,否则表格是无法渲染出来的。
  2. 由于示例中,返回的是包含对象的数组类型,于是需要设置 dataSrc 为空,否则也无法得到数据。Datatables 提供多种返回数据格式,具体参照这里Ajax sourced data

3. 功能介绍

由于 Datatables 的功能实在太多了,这里也不可能全部介绍到,根据实际项目经验,主要介绍一些比较实用,或者跟 Bootstrap-Table 有差异性的功能点。

(1)操作区

还记得上面表格页面预留的两列吧,想必你也猜出来了,最右边的那列,就是用来放操作按钮的,我们添加一个表格参数 columnDefs 用来定义列。

columnDefs: [
  {
        targets: -1,
        visible: false,
        sortable: false,
        render: function(data, type, row){
            return '<a href="#" title="详情">' + 
            '<i class="glyphicon glyphicon-eye-open"></i> ' + 
            '</a>'+ 
            '<a href="#editProject" data-toggle="modal" data-id="' + row.p_id +'" title="修改">' + 
            '<i class="glyphicon glyphicon-pencil"></i> ' + 
            '</a>'+
            '<a href="#delProject" data-toggle="modal" data-id="' + row.p_id +'" title="删除">' +
            '<i class="glyphicon glyphicon-trash text-danger"></i> ' + 
            '</a>';
        }
    }
],

targets 为选择哪一列,-1 代表倒数第 1 列,render 渲染的样式。最后表格效果如下图:

后面具体的实现方法,就不介绍了,你可以使用 modal 弹出框,也可以跳转到其他页面。

(2)响应式

在这个移动优先的互联网时代,不适应手机端的页面都不好意思拿出来。DatatablesResponsive 扩展,似乎比较优雅的解决了,在线表格在手机端无法完美显示的痛点。

上面预留的第一列发挥了它的用处,当点击+号时,自动展开隐藏的列,是不是比较优雅的解决了,在线表格在手机端查看的问题。实现方法非常简单,首先引入 Responsive 扩展的库文件,如下:

<link rel="stylesheet" href="/datatables.net-responsive-bs/css/responsive.bootstrap.min.css">

<!-- datatables responsive -->
<script src="/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/datatables.net-responsive-bs/js/responsive.bootstrap.min.js"></script>

然后在表格参数中,加入 responsive: true 即可,当屏幕尺寸渐渐缩小的时候,后面的列就会自动隐藏到+号里面。那么能不能定义优先级,让我去定义哪些列优先隐藏,哪些列后隐藏。当然可以,在 columns 中定义 responsivePriority 属性即可。如下:

columns: [
    { "data": null, sortable: false, defaultContent: '' , responsivePriority:  2},
    { "data": "id" },
    { "data": "name", responsivePriority:  1},
    { "data": "price" , responsivePriority:  3},
    { "data": "column1" },
    { 'data': "column2" },
    { "data": "column3" },
    { "data": "column4" },
    { "data": null , defaultContent: '' ,responsivePriority: 4}
],

值越小,显示优先级越高,没有设置值的地方,按照列的先后顺序依次隐藏。

(3)按钮功能

这个是 Datatables 比较有特色的一个功能,自由度比较高,可以自定义一系列的功能。它是通过 Buttons 的扩展来实现的,在介绍 Buttons 之前,需要先了解一下 DOM 这个参数,也就是表格的布局。

如上图所示,整个表格页面总共分为了 5 大块,这 5 大块分别用一个字母来表示,分别为 lftip,这是默认的布局。DOM 设置参考:

  • l - Length changing
  • f - Filtering input
  • t - The Table!
  • i - Information
  • p - Pagination
  • < and > - div elements
  • <"#id" and > - div with an id
  • <"class" and > - div with a class
  • <"#id.class" and > - div with an id and class

如果我们要使用 Buttons 扩展,就需要给它预留一个位置,所以我们要在表格参数中,加上 DOM 的配置。

简单介绍了下 DOM,现在我们引入 Buttons 的扩展文件,官方文档默认提供了 5 个功能按钮,需要引入一些第三方库,我都一一标注出来了,如下:

<!-- DataTable buttons -->
<script src="/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<!-- buttons 打印功能 -->
<script src="/datatables.net-buttons/js/buttons.print.min.js"></script>
<!-- buttons 导出功能 -->
<script src="/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/jszip/dist/jszip.min.js"></script>
<!-- buttons 生成PDF功能 -->
<script src="/pdfmake/build/pdfmake.min.js"></script>
<script src="/pdfmake/build/vfs_fonts.js"></script>

库文件引入之后,接下来配置一下 DOM 参数以及 Buttons 参数,如下:

dom: '<"pull-left"B>ft<"pull-left"i>p', 
buttons: [
    'copy', 'print', 'excel', 'csv', 'pdf'
],

从上面布局可以看出,Button 靠左上,搜索右上,表格中间,信息在左下,分页在右下。效果如下图:

如果你正确的引入了上述的那些库文件,且 dombuttons 配置正确,那么,不用你写一句代码就可以直接拥有:复制,打印,导出 excel,导出 csv,制作 PDF 的功能了。

但我并不满足上述的一些功能,我想自定义一些按钮,完全没有问题。假如,我想添加一个刷新按钮,在 buttons 里添加 reload 如下:

buttons: [
    'copy', 'print', 'excel', 'csv', 'pdf', 'reload'
]

然后加上 reload 的定义:

$.fn.dataTable.ext.buttons.reload = {
    text: '<i class="glyphicon glyphicon-refresh"></i>',
    action: function ( e, dt, node, config ) {
        dt.ajax.reload();
    }
};

text 为显示的样式,action 为执行的操作,dt.ajax.reload() 指的是表格刷新。设置完之后,你会发现按钮组那多了一个按钮,如下图:

你会发现那个图标挺好看的呀,默认的那几个按钮也变成图标就好了,就像下图所示:

于是修改一下 buttons 参数如下:

buttons: [
    {
        text: '<i class="glyphicon glyphicon-copy" title="复制"></i>',
        extend: 'copy'
    }, {
        text: '<i class="glyphicon glyphicon-print" title="打印"></i>',
        extend: 'print'
    }, {
        text: '<i class="glyphicon glyphicon-save-file" title="导出excel"></i>',
        extend: 'excel'
    }, {
        text: '<i class="glyphicon glyphicon-list-alt" title="导出csv"></i>',
        extend: 'csv'
    }, {
        text: '<i class="glyphicon glyphicon-file" title="生成pdf"></i>',
        extend: 'pdf'
    }, 'reload'
],

上面加上了 title 属性,当鼠标停留的时候,可以显示提示文本。结合 Buttons 扩展,我们可以在表格中实现很多功能。

(4)编辑功能

编辑模块在 Datatables 中是收费的,其实我们通过「操作区」也是可以实现编辑需求的,这里我再介绍一种具有 Datatables 特色的编辑功能。编辑按钮不同于其他功能按钮可以独立存在,编辑功能首先需要获取到该行的数据,然后才能执行后续操作。

获取行的操作,意味着需要选择某行,这里再引入一个扩展模块 Select,导入库文件:

<!-- datatables select  -->
<script src="/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="/datatables.net-select-bs/js/select.bootstrap.min.js"></script>

表格参数中,添加Select的配置,设置为单选:

select: 'single',

结合 Buttons 模块,我们再添加一个编辑按钮 edit,然后实现编辑按钮的动作。

$.fn.dataTable.ext.buttons.edit = {
    text: '<i class="glyphicon glyphicon-pencil"></i>',
    action: function ( e, dt, node, config ) {
        var rows = dt.rows({ selected: true }); // 获取选中的行
        var selectedCount = rows.count();       // 选中的行数量
        var data = rows.data()[0];              // 得到行数据
        if(selectedCount){
            var selectedId = data.id;
            $('#edit').modal('show');
            $('#edit small').html('编辑项目ID:' + selectedId);
            $('#edit form input[name=name]').val(data.name);
            $('#edit form input[name=price]').val(data.price);
            $('#edit form input[name=column1]').val(data.column1);
            $('#edit form input[name=column2]').val(data.column2);
            $('#edit form input[name=column3]').val(data.column3);
            $('#edit form textarea[name=column4]').val(data.column4);
        }else{
            alert('请选择行再操作');
        }
    }
};

这里有一个判断,选中了行,才能接下来的操作。示例代码就写到这里,实际编辑功能,需要结合后台来实现。

好了,Datatables 的介绍,我想就讲到这里,这里通过示例,大概介绍了 ResponsiveButtonsSelect 扩展模块的使用。由于功能实在太多,篇幅有限,只能介绍到这里了。官方文档的介绍很详细,建议没事翻一翻。

结尾

整个分享到这里就接近尾声了,这里主要介绍了,Web 开发中线上表格几个前端框架的介绍及使用,其中包括:TableditBootstrap-TableDatatables

Tabledit 只是一个简单的库,Bootstrap-TableDatatables 功能相对完备,只需掌握一个,基本就能满足在线表格的所有需求。如果你是初次接触在线表格的框架,那么建议选择 Datatables,花点时间研究一下 Datatables 官方文档,因为它支持的样式库比较多,界面更多样化一些。

致谢

最后,谢谢各位的订阅,本来选择默认 ¥1.99 的,但小编说,只是介绍的话,建议免费,没多想也就同意了。后来整理内容的时候才发现,并不是仅仅介绍那么简单。

虽然免费,但我还是尽量做到最好,为了方便学习,我新建了一个项目:example-table-online: 线上表格 Chat 的示例代码,你不用再搭建一个项目用来测试,在这个示例项目上,你可以尽情的测试各种参数。

最后的最后,祝各位有所收获,「玩」得开心。


本文首发于GitChat,未经授权不得转载,转载需与GitChat联系。

微信扫描登录