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

来源：互联网发布：恋爱心理学知乎编辑：程序博客网时间：2024/06/03 17:43

最近因为公司项目要做一个可编辑表格，我采用的是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)
），不用再去绑定这个列。
后台代码：@AutowiredTaskPriorityDAO dao; @RequestMapping("/TaskPriotiry") @ResponseBodypublic  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")@ResponseBodypublic 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
    }
  ]
}
大概使用就是这些，具体遇到的问题及解决过程思路会在后续贴出。

阅读全文

1 0