这几天使用checkbox这个属性，有个坑，记录一下。
checkbox获取的参数是一个数组，所以后台需要用一个数字类型的字段去接收这个字段；
由于我后台接口直接对应数据库表的字段，所以，我把该字段设计成了string,这样在传递时，就需要做一个简单的适配，将数组适配成String后进行传输；
先看下整体风格，接受不了官网那种豪放的风格，因为在页面风格上，做了不小的调整。
这是表格的页面：
这是编辑框的页面：
想到什么就说什么吧。
1.关于风格，选择的是bootstrap风格，从官网下载的貌似有个坑，需要修改一个地方，网上有不少这个坑的博客，遇到搜索下就OK了；
2.关于页面的控件位置的设置，自己定义一个div，然后使用官方提供的方法：table.buttons().container().appendTo("#buttons")，记得自己声明table变量；
3.关于各个输入框设定显示文本，其实是操作i18n这个对象
editorForEdit = new $.fn.dataTable.Editor({
i18n : {
edit : {
title : "修改用户信息",
submit : "修改"
}
},
"ajax" : "../php/tableOnlyData.php",
"table" : "#example",
"fields" : [ {
"label" : "用户名",
"name" : "user"
}, {
"label" : "联系人",
"name" : "contextPerson"
}, {
"label" : "邮箱",
tyoe : 'button',
"name" : "mail"
}, {
"label" : "员工号",
"name" : "num"
}, {
type : "checkbox",
label : "角色",
name : "player",
options : [ '管理员', '其他', ]
}, {
type : "radio",
label : "状态",
name : "state",
options : [ '正常', '禁用', ]
}],
});
4.一个table对象可以绑定多个editor对象，想添加多少按钮就添加多少按钮；
5.关于修改模态中，文本框的设置，有时候不想让用户修改某些信息，可以使用disable方法，具体如下：
editorForEdit.on('onInitEdit', function() {
editorForEdit.disable('user');
});
上面代码的效果就是让用户名这一栏无法修改；
5.1关于复选框数据问题，复选框数据是一个数组，即在想表格传递数据时，直接传递数组，编辑页面能够自动识别，其他类型数据没有尝试；
6.表如何对应多个按钮
js代码中的editorForCreate、editorForEdit都是单独生成的对象
var table = $('#example').DataTable({
"language" : {
"zeroRecords" : "无数据",
"info" : "",
search : "查询",
select : {
rows : ""
}
},
order : [ [ 0, 'asc' ] ],
searching : true,
paginate : false,
"columns" : [ {
data : "DT_RowId",
}, {
data : "user",
sorting : false
}, {
sorting : false,
data : "player",
}, {
sorting : false,
data : "state",
}, {
sorting : false,
data : "contextPerson",
}, {
sorting : false,
data : "mail",
}, {
sorting : false,
data : "num",
}, {
sorting : false,
data : "createPerson",
}, {
data : "createTime",
sorting : false,
} ],
"dom" : "Bfrtip",
"data" : tableData,
select : true,
buttons : [ {
extend : "create",
editor : editorForCreate,
text : '创建'
}, {
extend : "edit",
editor : editorForEdit,
text : '修改基本信息'
}, {
extend : "edit",
editor : editorForPassword,
text : '修改密码'
} ]
});
7.最后贴上全部的js代码
/**
*
*/
$(function() {
var tableData = [ {
"DT_RowId" : "1",
"user" : "121",
"player" : [ '管理员', '其他' ],
"state" : "正常",
contextPerson : "张三",
"mail" : "[email protected]",
"num" : "12345",
createPerson : "admin",
createTime : "2016-09-09 12:12:12"
}, {
"DT_RowId" : "2",
"user" : "121",
"player" : [ '管理员' ],
"state" : "正常",
contextPerson : "张三",
"mail" : "[email protected]",
"num" : "12345",
createPerson : "admin",
createTime : "2016-09-09 12:12:12"
}, ]
editorForCreate = new $.fn.dataTable.Editor({
i18n : {
create : {
title : "增加用户",
submit : "增加"
}
},
ajax : "../php/tableOnlyData.php",
table : "#example",
fields : [ {
label : "用户名",
name : "user"
}, {
label : "密码",
name : "password"
}, {
label : "联系人",
name : "contextPerson"
}, {
label : "邮箱",
tyoe : 'button',
name : "mail"
}, {
label : "员工号",
name : "num"
}, {
type : "checkbox",
label : "角色",
name : "player",
options : [ '管理员', '其他', ]
}, {
type : "radio",
label : "状态",
name : "state",
options : [ '正常', '禁用', ]
} ],
});
editorForEdit = new $.fn.dataTable.Editor({
i18n : {
edit : {
title : "修改用户信息",
submit : "修改"
}
},
"ajax" : "../php/tableOnlyData.php",
"table" : "#example",
"fields" : [ {
"label" : "用户名",
"name" : "user"
}, {
"label" : "联系人",
"name" : "contextPerson"
}, {
"label" : "邮箱",
tyoe : 'button',
"name" : "mail"
}, {
"label" : "员工号",
"name" : "num"
}, {
type : "checkbox",
label : "角色",
name : "player",
options : [ '管理员', '其他', ]
}, {
type : "radio",
label : "状态",
name : "state",
options : [ '正常', '禁用', ]
}],
});
editorForPassword = new $.fn.dataTable.Editor({
i18n : {
edit : {
title : "修改密码",
submit : "修改"
}
},
ajax : "../php/tableOnlyData.php",
table : "#example",
fields : [ {
label : "新密码",
name : "password1"
}, {
label : "确认新密码",
name : "password2"
} ],
});
editorForEdit.on('onInitEdit', function() {
editorForEdit.disable('user');
});
var table = $('#example').DataTable({
"language" : {
"zeroRecords" : "无数据",
"info" : "",
search : "查询",
select : {
rows : ""
}
},
order : [ [ 0, 'asc' ] ],
searching : true,
paginate : false,
"columns" : [ {
data : "DT_RowId",
}, {
data : "user",
sorting : false
}, {
sorting : false,
data : "player",
}, {
sorting : false,
data : "state",
}, {
sorting : false,
data : "contextPerson",
}, {
sorting : false,
data : "mail",
}, {
sorting : false,
data : "num",
}, {
sorting : false,
data : "createPerson",
}, {
data : "createTime",
sorting : false,
} ],
"dom" : "Bfrtip",
"data" : tableData,
select : true,
buttons : [ {
extend : "create",
editor : editorForCreate,
text : '创建'
}, {
extend : "edit",
editor : editorForEdit,
text : '修改基本信息'
}, {
extend : "edit",
editor : editorForPassword,
text : '修改密码'
} ]
});
table.buttons().container().appendTo("#buttons")
})
- 查看图片附件