这篇文章主要记录针对表格的常用操作,增删改查。涉及的内容包括需要的文件、如何定义操作按钮、一些控件如何交互
插件链接
Benefits
- 针对普通需求,不需要写编辑页面,插件自动生成
- 自动适配的表格的风格,是页面看起来比较舒服
Requirements
完整的代码
- 先贴上完整的代码,之后会解释一些问题,想明白这些问题,回头再看这一大段代码,也就释然了。
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 = {};
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);
效果图
- 最后放两张实际效果图
![编辑按钮组](https://img-blog.csdn.net/20170725162315102?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVhbjQ4NzYzOQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)