JQuery Datatables editor 行内编辑功能

背景

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

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

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

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

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

                

 

---

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

对Position字段进行编辑：

 

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

 

行内下拉框：

行内日期选择：