最近因为公司项目要做一个可编辑表格，我采用的是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[]{});
}{
"data"
: [
{
"DT_RowId"
:
"row_37"
,
"first_name"
:
"f'f"
,
"last_name"
:
"方法"
,
"phone"
:
"发"
,
"city"
:
"f'f"
,
"image"
:
null
}
]
}
大概使用就是这些，具体遇到的问题及解决过程思路会在后续贴出。
注意：datatable editor是免费使用15天的，现在新版本无法破解（暂时找不到方法）。希望不要用它了。后续我会把我自己做的代码po出来，基本能代替他的功能。