Tabledit 表格插件

JS 插件文档库邀你一起协同创作 -

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 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 参数。

更多Chat...