dataTable-editor的设置（2）

--2016-12-30补充
这几天使用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" : "[e-mail]",
		"num" : "12345",
		createPerson : "admin",
		createTime : "2016-09-09 12:12:12"
	}, {
		"DT_RowId" : "2",
		"user" : "121",
		"player" : [ '管理员' ],
		"state" : "正常",
		contextPerson : "张三",
		"mail" : "[e-mail]",
		"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")
})