Tabledit 表格插件

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

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

更多Chat...

推荐阅读更多精彩内容