常规功能和模块自定义系统 (cfcmms)—029开发日志(创建ManyToMany的column4)

029开发日志(创建ManyToMany的column4)

　　根据以上几节的准备，在这一节中可以加入ManyToManyColumn.js了。先来看看做好的样子如下图：

　　单击文字链接可以显示该条记录的情况。按下删除按钮则会显示一个提示窗口，询问是否删除此项。

　　下面即为ManyToManyColumn.js的代码。

/**
 * 
 * ManyToMany记录的管理，将根据权限设置来显示修改或删除按钮
 * 
 * 蒋锋 2015.12.31
 * 
 */

Ext
		.define(
				'app.module.widget.column.ManyToManyColumn',
				{
					extend : 'Ext.grid.column.Column',
					alias : 'widget.manytomanycolumn',
					minWidth : 200,
					editButtonSpan : '',
					deleteButtonSpan : '',
					manyToManyModuleName : null,
					manyToManyModuleTitle : null,

					initComponent : function() {

						var joinTable = this.fieldDefine.tf_joinTable;
						// 取得joinTable的模块定义
						var joinModule = app.modules.getModule(joinTable);

						// manyToMany 另一端的模块名称，模块的字段名为Set<modulename>,或
						// List<module>,利用正则表达式，取得<>之间的内容。
						this.manyToManyModuleName = /\w+/.exec(/<\w+>/
								.exec(this.fieldDefine.tf_fieldType)[0])[0];
						this.manyToManyModuleTitle = app.modules
								.getModule(this.manyToManyModuleName).tf_title;

						// 如果有可以修改joinTable值的权限，那么就加上前面的一个可以修改的按钮。
						if (joinModule.tf_userRole.tf_allowEdit) {
							this.editButtonSpan = '<span class="manyToManyEdit fa fa-edit"></span>';
						}
						// 如果可以删除的话，加上可以删除的按钮。
						if (joinModule.tf_userRole.tf_allowDelete) {
							this.deleteButtonSpan = '<span class="manyToManyContextClose fa fa-close"></span>';
						}
						this.callParent();
					},

					renderer : function(val, metaData, model, row, col, store, gridview) {
						if (val) {
							// "0000,管理员,1700|||0005,市级管理员,1701|||0010,查询角色,1702" ,
							// 第三个值表示joinTable的主键
							var records = val.split('|||');
							var column = gridview.headerCt.getGridColumns()[col];
							var tpl = new Ext.Template(column.editButtonSpan
									+ '<span class="manyToManyTD">{val}</span>');
							var result = '';
							for ( var i in records) {
								var fields = records[i].split(',');
								result += '<span class="manyToManyContext" _id="' + fields[0]
										+ '" _joinid="' + fields[2] + '">' + fields[1] + '</span>'
										+ column.deleteButtonSpan;
							}
							return tpl.apply({
								val : result
							});
						}
					},

					processEvent : function(type, view, cell, recordIndex, cellIndex, e,
							record, row) {
						var me = this;
						if (type === 'click') {
							if (e.getTarget().className === 'manyToManyContext') {
								app.modules.showModuleRecord(this.manyToManyModuleName, e
										.getTarget().getAttribute('_id'));
							} else if (Ext.String.startsWith(e.getTarget().className,
									'manyToManyContextClose')) {
								// 点击了删除按钮，先找到前面一个节点，里面包含了要删除的信息
								var target = e.getTarget().previousElementSibling;
								var module = this.up('modulegrid').module;
								var text = module.tf_title + ' ' + record.getTitleTpl() + ' 的 '
										+ this.manyToManyModuleTitle + '【' + target.innerHTML + '】';
								Ext.MessageBox.confirm('确定删除', '确定要删除' + text + '吗?', function(
										btn) {
									if (btn == 'yes') {
										// 使用module里面批量删除的ajax
										Ext.Ajax.request({
											url : 'rest/module/removerecords.do',
											params : {
												moduleName : me.fieldDefine.tf_joinTable,
												ids : target.getAttribute('_joinid'),
												titles : target.innerHTML
											},
											success : function(response) {
												var info = Ext.decode(response.responseText, true);
												if (info.resultCode == 0) {
													Ext.toastInfo(text + ' 已成功被删除。');
													// 删除记录后，刷新当前记录
													me.up('modulegrid').refreshSelectedRecord();
												} else {
													Ext.MessageBox.show({
														title : '删除结果',
														msg : text + '删除失败：<br/><br/>'
																+ info.errorMessageList,
														buttons : Ext.MessageBox.OK,
														icon : Ext.MessageBox.ERROR
													});

												}
											},
											failure : function() {
												window.alert('删除时，服务器返回返回错误');
											}
										})
									}
								});
							} else if (Ext.String.startsWith(e.getTarget().className,
									'manyToManyEdit'))
								console.log('编辑当前记录的manyToMany字段');
						}
					}
				})

　　另外需要在WebContent/sass/src/module/widget/column的目录下建立css文件 ManyToManyColumn.scss 文件，然后用sencha 命令编译一下即可把scss加入到主css文件中。

.manyToManyTD {
	white-space: pre-line;
	word-wrap: break-word;
}


.manyToManyEdit {
	cursor: pointer;
	font-size: 12px;
}



.manyToManyContext {
	margin-left : 3px;
	cursor: pointer;
	text-decoration: underline;
	color : #11264f;
	white-space:nowrap;
}

.manyToManyContextClose {
	cursor: pointer;
	font-size: 9px;
	vertical-align: super;
}

　　按下编辑按钮后的选择当前记录的ManyToMany值的窗口下节做。

　　既然ManyToMany是双向的，我们既然可以在用户模块中管理操作角色，那么也应该能在操作角色里面控制用户。下面只要配置一下就可以了，并不需要修改任何代码。_Role中的@ManyToMany字段可以加，也可以不加。下面只需二步就可以在用户角色中加入用户的ManyToMany控制。

　　1、给用户操作色色_Role，添加一个如下字段：

　　2､在用户操作角色的grid方案中加入这个用户列表字段即可。

　　下图即为用户操作角色的grid。

　　以后所有的ManyToMany字段都可以通过配置来进行操作了。