JQuery Datatables editor 在编辑前刷新数据

背景

在同一时间，可能很多人在编辑修改同一数据，这会导致在一个人还在在修改的过程中另一人在完成了修改并保存了数据。editor在button插件的扩展中可以有效的缓解这个问题：自定义一个编辑按钮，此编辑按钮实现 点击按钮后，首先刷新数据，然后再弹出模态框的功能。详细信息点击这里查看官网说明

---

使用效果如下图所示：

点击刷新并编辑 按钮，按钮会有一个加载状态的动画效果，此刻正在刷新数据，刷新完成后弹出编辑框 。

                                                        

---

JS代码如下图所示：

    $.fn.dataTable.ext.buttons.editRefresh = {
        extend: 'edit',
        text: '刷新并编辑',
        action: function (e, dt, node, config) {
            this.processing(true);

            var selectedRowsIds = dt.rows({ selected: true }).ids();//获取每行在前端自动生成的id数组
            var selectedRows = dt.rows({ selected: true }).data();//获取选中数据
            var length = selectedRows.length;//得到选中数据的数组的长度
            var selectedRowsNames = "";
            for (var i = 0; i < length; i++) {
                selectedRowsNames += selectedRows[i].Name;
                if (i != length - 1)
                {
                    selectedRowsNames += ",";
                }
            }
            var that = this;
            var url = config.editor.ajax().edit.url;//获得editor中更新出操作的URL
            $.ajax({
                url: url,
                type: 'post',
                dataType: 'json',
                data: {
                    refresh: 'rows',
                    names:selectedRowsNames,
                    ids: selectedRowsIds.toArray().join(','),
                },
                success: function (json) {
                    // On success update rows with data
                    for (var i = 0 ; i < json.data.length ; i++) {
                        dt.row('#' + json.data[i].DT_RowId).data(json.data[i]);
                    }
                    dt.draw(false);

                    // And finally trigger editing on those rows
                    $.fn.dataTable.ext.buttons.edit.action.call(that, e, dt, node, config);
                }
            });
        }
    };

然后在datatable 的 button属性中添加一个按钮即可，代码如下图所示：

{ extend: 'editRefresh', editor: editor },

---

 说明：

  1、在ajax中需要将每行的id (datatable默认的是存id字段是DT_RowId ) 传到后端，因为在成功回调函数里，会根据id刷新数据。本文中id是在前端动态生成的，单独返回给后端没什么用，必须加上另外一个属性，本文中我随便取了Name这个属性。在实际项目中可以自定义id，并且用那些前后端都能识别的字符串，那样就只需要传一个id到后端就可以了。