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

在传统企业中，存在太多的线下 Excel 数据处理以及汇总的工作，能不能有一种方式快速将线下 Excel 数据汇总及处理的工作，搬到线上。这里主要分享，Web 开发中线上表格的几个前端框架的介绍及使用，其中包括：

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

在传统企业中，存在很多线下 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 部分代码如下：

...  <% for(var i = 0 ; i < dataList.length; i++){ %>      <% } %>
  
      
#
      
公司
      
地点
      
负责人
      
人员数
      
备注
  
      
<%= dataList[i].id %>
      
<%= i+1 %>
      
<%= dataList[i].plant %>
      
<%= dataList[i].place %>
      
<%= dataList[i].owner %>
      
<%= dataList[i].preparation %>
      
<%= dataList[i].bz %>
    
...

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

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

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

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

2. 使用

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

接下来，编写具体实现代码，下面一段代码基本包括了 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 operatorrouter.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 是提供异步获取数据功能的，这里的准备工作暂不用管前台页面结构。因为前台页面中表格部分，只需一句代码就解决了：

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

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

js 文件建议放到页面最底下，在 之前引入即可，如下所示：

注意：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-table 的 refresh 方法，用来更新表格数据。

$('#table').bootstrapTable('refresh');

（2）导入功能

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

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

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

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）：

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

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

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

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

pk 在 X-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 '' +             ' ' +             ''+             '' +             ' ' +             ''+            '' +            ' ' +             '';    },    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-Table，Datatables 的前台页面中需要定义表格的表头，否则将无法显示，代码如下：

  
    
      
      
ID
      
Item name
      
Item price
      
列1
      
列2
      
列3
      
列4
      
    
  

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

js 文件依然还是放到最底下， 之前即可，引入正确的库文件之后，准备工作就 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 '' +             ' ' +             ''+             '' +             ' ' +             ''+            '' +            ' ' +             '';        }    }],

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

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

（2）响应式

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

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

然后在表格参数中，加入 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 个功能按钮，需要引入一些第三方库，我都一一标注出来了，如下：

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

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

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

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

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

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

然后加上 reload 的定义：

$.fn.dataTable.ext.buttons.reload = {    text: '',    action: function ( e, dt, node, config ) {        dt.ajax.reload();    }};

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

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

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

buttons: [    {        text: '',        extend: 'copy'    }, {        text: '',        extend: 'print'    }, {        text: '',        extend: 'excel'    }, {        text: '',        extend: 'csv'    }, {        text: '',        extend: 'pdf'    }, 'reload'],

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

（4）编辑功能

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

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

表格参数中，添加Select的配置，设置为单选：

select: 'single',

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

$.fn.dataTable.ext.buttons.edit = {    text: '',    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 的介绍，我想就讲到这里，这里通过示例，大概介绍了 Responsive、Buttons、Select 扩展模块的使用。由于功能实在太多，篇幅有限，只能介绍到这里了。官方文档的介绍很详细，建议没事翻一翻。

结尾

整个分享到这里就接近尾声了，这里主要介绍了，Web 开发中线上表格几个前端框架的介绍及使用，其中包括：Tabledit，Bootstrap-Table 及 Datatables。

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

致谢

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

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

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

---

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

阅读全文: http://gitbook.cn/gitchat/activity/5b8f53dc1ab2004b1c30c3a9

您还可以下载 CSDN 旗下精品原创内容社区 GitChat App ，阅读更多 GitChat 专享技术内容哦。