最近因為公司專案要做一個可編輯表格，我採用的是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<Object>().responseSuccess(list)

），不用再去繫結這個列。

後臺程式碼：

@Autowired
	TaskPriorityDAO dao;
	 @RequestMapping("/TaskPriotiry")
	 @ResponseBody
		public  ApiResponse<Object>  find() {
		   Priority i=new Priority();
		   List<Priority> list=i.selectAll();
		   System.out.println("list====="+list);
		   return new ApiResponse<Object>().responseSuccess(list);
		}

@RequestMapping("/doSavePriority")
		@ResponseBody
		public ApiResponse<Object> doSavePriority(Priority p){
			p.insert();
			 return new ApiResponse<Object>().responseSuccess(new Priority[]{p});
		}

/*修改*/
    @RequestMapping("/Updatapriority")
    @ResponseBody
    public ApiResponse<Object> priorityUpdata(Priority p){
    	System.out.println(p);
    	p.update(new EntityWrapper<Projects>().eq("priority_id",p.getPriorityId()));
    	 return new ApiResponse<Object>().responseSuccess(new Priority[]{p});
    }

/*刪除*/
    @RequestMapping("/doDeletePriority")
    @ResponseBody
    public ApiResponse<Object> deletePriority(Priority p){
    	System.out.println(p);
        //ps.deleteOneProject(projectId);
    	p.delete(new EntityWrapper<Projects>().eq("priority_id",p.getPriorityId()));
    	return new ApiResponse<Object>().responseSuccess(new Priority[]{});
    }

！！！記得：一點要在編輯後後臺傳送到datatable前端的資料格式：

{    "data" : [      {        "DT_RowId" :  "row_37" ,        "first_name" :  "f'f" ,        "last_name" :  "方法" ,        "phone" :  "發" ,        "city" :  "f'f" ,        "image" :  null      }    ] }

大概使用就是這些，具體遇到的問題及解決過程思路會在後續貼出。

注意：datatable editor是免費使用15天的，現在新版本無法破解（暫時找不到方法）。希望不要用它了。後續我會把我自己做的程式碼po出來，基本能代替他的功能。