关于Datatables editor 的使用细节以及数据格式（第一次博客，希望对有需要的人有帮助）

最近因为公司项目要做一个可编辑表格，我采用的是bootstrap的前端框架，使用打datatable editor来实现这个功能。下面具体写开发过程以及问题：

首先你应该找相关资源：资料地址

效果图：

可以实现单个表格编辑。然后下拉到页面最后找到下面目录：

选择inline editing的例子可以实现行内编辑：这里我选择的是 inline editing with a submit button

然后关注点在于下面的例子内容了：

引入javascript相关的js、css（注意这里的editor的js是有lisence，所以需要自己再找资料下载），然后看看Ajax load里面的数据格式，你的datatable初始化数据需要安照

datatable要求的格式，这里选择json。Ajax data的数据是指你编辑后后台返回给前端js的数据格式（非常重要！！！）

下面直接上代码：

$(document).ready(function() {
   editor = new $.fn.dataTable.Editor( {
        ajax: {
            create: {
                type: 'POST',
                url:  'http://localhost:8080/task-management/doSavePriority',
                data:function(data){  
                        var result={};  
                        for(var i in data.data){  
                            var result=data.data[i];  
                            result.DT_RowId=i; 
                            result.action=data.action;  
                           console.log(result.toString());  
                        }  
                        return result;  
                    },  
            },
            edit: {
                type: 'POST',
                url:  'http://localhost:8080/task-management/Updatapriority',
                data:function(data){  
                    var result={};  
                    for(var i in data.data){  
                        var result=data.data[i];  
                        result.action=data.action;
                        result.DT_RowId=i;
                        result.priorityId=i;
                        console.log(result);  
                    }  
                    return result;  
                },  
            },
            remove: {
            	url:  'http://localhost:8080/task-management/doDeletePriority',
                data:function(data){  
                    var result={};  
                    for(var i in data.data){  
                        var result=data.data[i];  
                        result.action=data.action;
                        result.priorityId=i;
                        console.log(result);  
                    }  
                    return result;  
                },  
            }
        },
        table: "#example",
        idSrc: 'priorityId',
        fields: [ {
                label: "priorityId:",
                name: "priorityId"
            }, {
                label: "priorityName:",
                name: "priorityName"
            }, 
        ]
    } );
 
    // Activate an inline edit on click of a table cell
    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
    	editor.inline( this,{
            buttons: { label: '>', fn: function () { this.submit(); } }
        } );
    	
    } );
 
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "http://localhost:8080/task-management/TaskPriotiry",
        order: [[ 1, 'asc' ]],
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "priorityId" ,className: 'editable'},
            { data: "priorityName",className: 'editable' }
        ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

这里我把ajax自定义为三个，create、edit、和delete对应上面三个按钮，data是自己在前端对返回给后台的数据进行二次封装的，使之能与后台接受的数据格式匹配（数据不匹配报400错误）

注意例子里面没有idSrc: 'priorityId',这一项他默认的是idSrc: "DT_RowId"，这个相当于datatable的主键，这里我们把主键改为我们自己表里的id。这在我们上传数据时方便多了

只需要上传相关表的实体类转换的json（

ApiResponse