简单介绍

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


该插件会自动在表格的最后一列添加上编辑以及删除的按钮,并提供简单的修改方式,例如下图所示:


image.png


HTML 部分

Tabledit 应用场景限于一些简单的配置表修改,主要功能是表格的快速处理,要在现有的表格上才能发挥作用,不支持生成表格数据。


但是,通常情况下,我们的表格数据都是来源于后台,为了更贴近实际情况,我简单模拟了一下,在后台路由端生成表格数据 dataList,然后传到前台,具体后台代码可以查看 Github 上 js-plugin-example 项目。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 是后台传到前台的数据对象,最终才能渲染出上图样式。


引入文件

在前台页面中,引入库文件,除了 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="/markcell/jquery-tabledit/jquery.tabledit.min.js"></script>


同样,你也可以依靠 bower 包管理器,进行安装,安装命令 bower install --save jquery-tabledit ,如下图,默认安装到了 bower_components/markcell/jquery-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']]
    },
  });
});


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



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



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



后台根据接收到的指令,直接处理请求即可。


后台返回数据

由于采用不同语言,甚至是不同的框架,获取数据的方式会有所不同,这里有一点需要注意的是,返回数据需是 JSON 格式。例如,Node 后台的代码如下:


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