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);

效果图

• 最后放两张实际效果图