JQuery Datatables editor 行内编辑功能

背景

ERP软件中，能进行行内编辑的表单是常用功能，行内编辑功能能让用户在表格中自己填写、修改、删除数据或者选择数据，可以说表格控件是ERP软件的核心控件，而行内编辑功能是核心中的关键。

本文会继续接着上一篇文章的介绍继续增加功能。

editor同样支持行内编辑，并且只需要几句代码即可，首先开启行内编辑功能：

$('#example').on('click', 'tbody td.Editor', function (e) { //在表格中对打上Editor标签的列才能开启行内编辑功能
     editor.inline(this, { onBlur: 'submit' });//在修改数据后点击任意处即可关闭表单保存修改后的数据
});

然后在datatable的初始化中，对需要进行行内编辑的列打上Editor标记，如下图所示：

                

 

---

 完成上述两个步骤后，看下页面效果：

对Position字段进行编辑：

 

行内单选框可以选择性别：

 

行内下拉框：

行内日期选择：

 

---

因为是行内编辑，可以去掉表格左上角的其两个按钮：编辑按钮、复制按钮。 

可以看到，本来在模态框中的功能，全部移到了行内！ 使用起来非常的方便。

最后，还是贴一下修改后的完整代码吧，保留了datatable、editor的初始化代码，editor的客户端验证代码，别的都可以去掉了。

    var table;
    var