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