Tabledit 表格插件

2018-12-05 本文已影响142人 lupeng

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 是后台传到前台的数据对象，经过前台渲染达到如下图所示效果：

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

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

数据是通过后台传到前台，并在前台渲染出来的；
数据的格式是一个包含 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 参数。

Tabledit 表格插件

Tabledit

1. 准备

2. 使用

猜你喜欢

热点阅读