DataTables增删改查（二）

这篇文章主要记录针对表格的常用操作，增删改查。涉及的内容包括需要的文件、如何定义操作按钮、一些控件如何交互

插件链接

Benefits

• 针对普通需求，不需要写编辑页面，插件自动生成
• 自动适配的表格的风格，是页面看起来比较舒服

Requirements

• css
  bootstrap.min.css
  dataTables.bootstrap.min.css
  buttons.bootstrap.min.css
  select.bootstrap.min.css
  editor.bootstrap.min.css
• js
  jquery-1.12.4.js
  bootstrap.min.js
  jquery.dataTables.min.js
  dataTables.bootstrap.min.js
  dataTables.buttons.min.js
  buttons.bootstrap.min.js
  dataTables.select.min.js
  dataTables.editor.min.js
  editor.bootstrap.min.js

完整的代码

• 先贴上完整的代码，之后会解释一些问题，想明白这些问题，回头再看这一大段代码，也就释然了。

    var editor = new $.fn.dataTable.Editor({        //汉化，设置标题        i18n : {            error: {                system: ""            },            create : {                title : "增加角色",                submit : "增加"            },            edit : {                title : "修改角色",                submit : "修改"            }        },        ajax : function(method, url, data, success, error) {            // 新增            if (data.action == "create") {                var param = {};                //data包括了选中某行的数据，由于数据格式有问题，这里重新获取                for ( var i in data.data) {                    param = data.data[i];                }                var jsonData = postAjax(param,"/api/hm/auth/role/create", false);                // 查询成功，拼接表格参数                if (jsonData.status == 100) {                    var tableObject = {};                    //编辑表格需要这一列，可以不展示，但一定要有                    param.DT_RowId = table.data().length + 1;                    tableObject.data = [];                    tableObject.data[0] = param;                    success(tableObject);                } else {                    error();                }            } else {                //修改                var param = {};                for ( var i in data.data) {                    param = data.data[i];                    param.action = data.action;                    param.DT_RowId = i;                }                var authorizeId = "";                var jsonData = postAjax(param,"/api/hm/auth/role/update", false);                // 查询成功，拼接表格参数                if (jsonData.status == 100) {                    var tableObject = {};                    tableObject.data = [];                    tableObject.data[0] = param;                    success(tableObject);                } else {                    error();                }            }        },        table : "#userManageTable",        //模态窗口设置，后面的样式是添加必填项        fields : [ {            label : "角色<span style='color: #f00;size: 4px'>*</span>",            name : "player"        }, {            label : "权限<span style='color: #f00;size: 4px'>*</span>",            name : "authorize",            type : "checkbox",            options : moduleTitle        }, {            type : "select",            label : "状态",            name : "state",            options : [ '正常', '禁用', ]        } ],    });    //初始化时开启/关闭对某一列的修改    editor.on('onInitEdit', function() {        editor.disable('player');    });    editor.on('onInitCreate', function() {        editor.enable('player');    });

关联表格

• 如何与某个表格关联
• 需要两个操作，第一是在dataTable属性里面，设置buttons属性，另外一个是在editor对象里面，设置table属性，需要注意的是，表格初始化对象，一些属性需要按照约定来设置，比如dom字段，需要设置为Bfrtip，比如data字段，每一行需要DT_RowId这个字段，用于唯一表示某一行

buttons : [ {            extend : "create",            editor : editor,            text : '创建'        }, {            extend : "edit",            editor : editor,            text : '修改'        }

table : "#userManageTable",

与服务器交互

• 如何将数据发送给服务器，直接在方法内部使用ajax同步请求即可
• 获取服务器数据后，如何刷新表格，如何给出错误提示
• 如上代码，实际上，回调函数提供了success和error两个方法，请求后台数据成功后，按照约定的数据格式，将数据塞进success方法中，以下是数据格式及方法

var tableObject = {data:[{action:"create",data:{},DT_RowId:12},]}success(tableObject);

效果图

• 最后放两张实际效果图