【第22期】观点:IT 行业加班,到底有没有价值?

常规功能和模块自定义系统 (cfcmms)—019自定义grid方案(3)

原创 2015年11月20日 11:27:09

常规功能和模块自定义系统 (cfcmms)—019自定义grid方案(3)


  这一节开始进入自定义的内部,来看看第一个自定义的功能是如何实现的。
  
  1、在系统登录的时候,将所有的登录用户有权限的模块定义信息全部发送到前端。这段代码在app/view/main/MainModel.js中。在MainModel创建的时候,通过会发送一个同步的ajax请求来获取数据。取得数据后将所有的module信息放到MainView的data中。
						Ext.Ajax
								.request({
									url : 'applicationinfo.do',
									async : false, // 同步
									success : function(response) {
										var text = response.responseText;
										var applicationInfo = Ext.decode(text, true);
										applicationInfo.tf_previewExts = applicationInfo.tf_previewExts
												.split(',');
										for (i in applicationInfo.modules) {
											var moduleinfo = applicationInfo.modules[i];
											for (j in applicationInfo.roleInfo.tf_userRoleDetails) {
												if (applicationInfo.roleInfo.tf_userRoleDetails[j].tf_moduleId == moduleinfo.tf_moduleId) {
													//加入每个模块的权限信息
													moduleinfo.tf_userRole = applicationInfo.roleInfo.tf_userRoleDetails[j];
													break;
												}
											}
											if (!moduleinfo.tf_userRole)
												moduleinfo.tf_userRole = {};
											// 给每个模块创建一个ModuleInfo的模块信息类
											me.data.modules.add(moduleinfo.tf_moduleName,
													new Ext.create('app.module.ModuleInfo', moduleinfo));
										}
										delete applicationInfo.modules;
										delete applicationInfo.roleInfo.tf_userRoleDetails;
										Ext.apply(me.data, applicationInfo);
									}
								});
  “省份”模块的所有从后台加载过来的数据如下图所示:


  2、在创建模块显示的时候,会根据tf_gridSchemes中的定义来生成grid的columns。在app/module/factory/中建立了一个columnsFactory.js用来根据模块的grid的定义来生成columns。其主要的一段代码如下:
						/**
						 * module是模块的字义,schemeOrderId 为要生成的columns的 顺序号,不指定顺序号,则默认第一个方案
						 */
						getColumns : function(module, schemeOrderId) {

							var scheme = module.getGridScheme(schemeOrderId);

							var columns = [];
							// 是否有附件,有附件则加入附件按钮
							if (module.tf_hasAttachment
									&& module.tf_userRole.tf_attachmentBrowse)
								columns.push({
									locked : true,
									xtype : 'attachmentnumbercolumn'
								});

							// 是否模块具有审核功能
							if (module.tf_hasAuditing) {
								columns.push({
									locked : true,
									xtype : 'auditingactioncolumn'
								});
							}
							// 是否模块具有审批功能
							if (module.tf_hasApprove) {
								columns.push({
									locked : true,
									xtype : 'approveactioncolumn'
								});
							}

							// 是否模块具有支付功能
							if (module.tf_hasPayment) {
								columns.push({
									locked : true,
									xtype : 'payoutactioncolumn'
								});
							}
							// 如果是附件模块,加一个可以预览的列
							if (module.tf_moduleName == '_Attachment') {
								columns
										.push({
											dataIndex : 'tf_attachmentId',
											text : '预览',
											align : 'center',
											menuDisabled : true,
											sortable : true,
											width : 56,
											resizable : false,
											renderer : function(val, rd, model) {
												if (model.get('tf_filename'))
													return '<img height="16" width="16" src="attachment/preview.do?id='
															+ model.get('tf_attachmentId') + '" />';
												else
													return '<img height="16" width="16" src="" />';
											}
										});
							}
							// 如果模块有记录icon,则加入记录字段icon列
							if (module.tf_hasRecordIcon){
								columns.push({
									xtype : 'recordiconcolumn'
								})
							}
							
							for ( var i in scheme.tf_schemeGroups) {
								var sg = scheme.tf_schemeGroups[i];
								// 是否需要分组
								var isgroup = sg.tf_isShowHeaderSpans;
								var group = {
									gridGroupId : sg.tf_gridGroupId,
									text : sg.tf_gridGroupName,
									locked : sg.tf_isLocked,
									columns : []
								};
								for ( var j in sg.tf_groupFields) {
									var gf = sg.tf_groupFields[j];
									var fd = module.getFieldDefine(gf.tf_fieldId);
									var field;
									if (fd) {
										if (fd.tf_isHidden)
											continue;
										field = this.getColumn(gf, fd, module);
									} else { // 如果不是本模块的基本字段,那么在附加字段中找(可能是父模块,祖父模块的字段,或者子模块的聚合字段)
										var fd = module.getAdditionFieldDefine(gf.tf_fieldId);
										field = this.getColumn(gf, fd, module);
										if (field.dataIndex.search('C_') == 0) {
											field.moduleName = field.dataIndex.slice(2);
											field.renderer = this.childCountFieldRenderer;
										}
									}
									field.locked = sg.tf_isLocked || gf.tf_isLocked;
									// 如果列显示字段有附加的属性,如renderer 可以放在这里加入进去
									if (gf.tf_otherSetting) {
										try {
											eval('Ext.apply(field,' + gf.tf_otherSetting + ')');
										} catch (err) {
										}
									}
									if (isgroup) {
										this.canReduceTitle(group, field);
										group.columns.push(field);
									} else
										columns.push(field);
								}
								if (isgroup) {
									this.canReduceTitle(group, field);
									columns.push(group);
								}
							}

							console.log(columns);

							return columns;
						}

  上面这段代码首先根据模块的设置,判断是否有一些独立的信息显示字段,例如附件、图标、预览列等。然后将gridScheme中的分组定义依次加入到columns中。在加入的时候还要判断是否显示分组。
  这里处理了一个title显示的问题,例如有个分组的名称叫:“本年”,而分组下的字段名叫 “本年新增金额”,那么字段名中的“本年”将是可以被省掉的,下面的函数用来处理这个操作。
						// 看看分组名称是不是 下面column 的开头,如果是开头的话,并且columntitle 后面有内容,就把
						// 相同的部分截掉
						canReduceTitle : function(group, field) {
							if (field.text.indexOf(group.text) == 0) {
								field.text = field.text.slice(group.text.length).replace('(',
										'').replace(')', '').replace('(', '').replace(')', '');
								if (field.text.indexOf("<br/>") == 0)
									field.text = field.text.slice(5);
							}
						},

  如果一个字段有计量单位,那么需要在表头里显示一下。
						getTextAndUnit : function(fd) {
							var result = fd.tf_title.replace(new RegExp('--', 'gm'), '<br/>');// title中间有--表示换行
							var unitText = Ext.monetary.unitText === '个' ? ''
									: Ext.monetary.unitText;
							if (fd.tf_isMonetary && Ext.monetaryPosition === 'columntitle') {// 可能选择金额单位千,万,百万,亿
								if (fd.tf_unitText || unitText)
									result += '<br/><span style="color:green;">(' + unitText
											+ (fd.tf_unitText ? fd.tf_unitText : '') + ')</span>';
							} else {
								if (fd.tf_unitText)
									result += '<br/><span style="color:green;">('
											+ fd.tf_unitText + ')</span>';
							}
							return result;
						},

  其中还有一个 getColumn函数是用来生成每一列的定义的。
						/**
						 * 根据groupField,fieldDefine的定义,生成一个column的定义
						 */
						getColumn : function(gf, fd, module) {

							var field = {
								filter : {},
								maxWidth : 800,
								fieldDefine : fd,
								gridFieldId : gf.tf_gridFieldId, // 加上这个属性,用于在列改变了宽度过后,传到后台
								sortable : true,
								text : this.getTextAndUnit(fd),
								dataIndex : (fd.baseField || fd.tf_aggregate) ? fd.tf_fieldName
										: fd.manytoone_TitleName
							};

							if (fd.tf_tooltipTpl) {
								field.tooltipTpl = fd.tf_tooltipTpl; // 显示在字段值上的tooltip的tpl值
								field.tooltipXTemplate = new Ext.XTemplate(fd.tf_tooltipTpl);
							}
							if (gf.tf_ishidden)
								field.hidden = true;
							// 如果是此人可以审批的字段,那么加上一个可以审批的标记
							if (module.tf_hasApprove
									&& module.tf_userRole.tf_approveOrder >= 1) {
								if (field.dataIndex.indexOf('tf_sh') == 0
										&& field.dataIndex.substr(field.dataIndex.length - 1, 1) == module.tf_userRole.tf_approveOrder)
									field.text = '<span class="approvethisgridheadicon" >'
											+ '<img src="images/approve/approve_edit.png" />'
											+ fd.tf_title + '</span>';
							}
							
							switch (fd.tf_fieldType) {
							case 'Image':
								Ext.apply(field, {
									xtype : 'imagecolumn',
									align : 'center',
									width : 100,
								});
								break;
							case 'Date':
								Ext.apply(field, {
									xtype : 'datecolumn',
									align : 'center',
									width : 100,
									renderer : Ext.util.Format.dateRenderer
								});
								break;

							case 'Datetime':
								Ext.apply(field, {
									xtype : 'datecolumn',
									align : 'center',
									width : 130,
									renderer : Ext.util.Format.dateRenderer
								});
								break;

							case 'Boolean':
								field.xtype = 'checkcolumn';
								field.stopSelection = false;
								field.processEvent = function(type) {
									if (type == 'click')
										return false;
								};
								break;
							case 'Integer':
								Ext.apply(field, {
									align : 'right',
									xtype : 'numbercolumn',
									tdCls : 'intcolor',
									format : '#',
									renderer : Ext.util.Format.intRenderer
								});
								break;
							case 'Double':
								Ext.apply(field, {
									align : 'right',
									xtype : 'numbercolumn',
									width : 110,
									renderer : Ext.util.Format.floatRenderer
								});
								break;
							case 'Float':
								Ext.apply(field, {
									align : 'right',
									xtype : 'numbercolumn',
									width : 110,
									renderer : Ext.util.Format.floatRenderer
								});
								break;
							case 'Percent':
								Ext.apply(field, {
									align : 'center',
									xtype : 'widgetcolumn',
									width : 110,
									// renderer : Ext.util.Format.percentRenderer
									widget : {
										xtype : 'progressbarwidget',
										animate : true,
										textTpl : [ '{percent:number("0")}%' ]
									}
								});
								break;
							case 'String':
								if (module.tf_nameFields == fd.tf_fieldName)
									Ext.apply(field, {
										text : '<span class="fa fa-key"> ' + fd.tf_title
												+ '</span>',
										renderer : Ext.util.Format.nameFieldRenderer,
										summaryType : 'count',
										summaryRenderer : function(value) {
											return Ext.String.format('小计 ( {0} 条记录)', value);
										}

									});
								else
									Ext.apply(field, {
										renderer : Ext.util.Format.defaultRenderer
									});

								break;

							default:
								Ext.apply(field, {
									renderer : Ext.util.Format.defaultRenderer
								});
								break;
							}

							if (fd.s) { // tf_allowSummary
								Ext.apply(field, {
									hasSummary : true,
									summaryType : 'sum'
								});
							}
							// 如果是可以改变显示单位的数值,可以选择万,千,百万,亿
							if (fd.tf_isMonetary)
								field.renderer = Ext.util.Format.monetaryRenderer;
							if (gf.tf_columnWidth > 0)
								field.width = gf.tf_columnWidth;
							else if (gf.tf_columnWidth == -1) {
								field.flex = 1;
								field.minWidth = 120;
							}
							if (fd.manytoone_TitleName) {
								var pmodule = app.modules.getModuleInfo(fd.tf_fieldType);
								var icon = '';
								if (pmodule && pmodule.iconURL)
									icon = '<img src="' + pmodule.iconURL + '" />';
								Ext.apply(field, {
									renderer : Ext.util.Format.manytoOneFieldRenderer,
									text : '<span class="gridheadicon" >' + icon + fd.tf_title
											+ '</span>',
									manytooneIdName : fd.manytoone_IdName,
									moduleName : fd.tf_fieldType
								});
							}
							// 如果一个字段是一个附加字段,这个字段正好是父模块的父模块的一个namefileds字段,那么也要加成单击可以显示的功能
							// P__t1020___tf_title,例如这样的
							if (Ext.String.startsWith(fd.tf_fieldName, "P_")) {
								var fn = fd.tf_fieldName;
								var ppAsName = fn.substring(2, 10);
								if (ppAsName[6] == '_')
									ppAsName = ppAsName.substring(0, 6);
								var pmodule = app.modules.getModuleInfo(ppAsName);

								if (Ext.String.endsWith(fn, pmodule.tf_nameFields)) {
									var icon = '';
									if (pmodule && pmodule.iconURL)
										icon = '<img src="' + pmodule.iconURL + '" />';
									Ext.apply(field, {
										renderer : Ext.util.Format.manytoOneFieldRenderer,
										text : '<span class="gridheadicon" >' + icon
												+ fd.tf_title.replace(new RegExp('--', 'gm'), '<br/>')
												+ '</span>',
										manytooneIdName : pmodule.tableAsName + '___'
												+ pmodule.tf_primaryKey,
										moduleName : pmodule.tf_moduleName
									});
								}
							}

							return field;
						},


  还有一些函数是用来生成父级模块记录链接字段和子模块聚合字段,详见程序。

  通过以上的这些函数就可以根据配置信息动态的生成一个grid所需要的各个列了。



版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

常规功能和模块自定义系统(cfcmms)—006Extjs的目录结构和mvvm介绍

常规功能和模块自定义系统(cfcmms)—006Extjs的目录结构和mvvm介绍   在eclipse中打开cfcmms项目,展开后目录结构如下图所示,图中简单的注释了一下各个目录和文件的说明...
  • jfok
  • jfok
  • 2015-09-02 09:38
  • 4340

跟我一起学extjs5(40--增加一个自定义模块[1建立表和bean文件])

跟我一起学extjs5(40--增加一个自定义模块[1建立表和bean文件])         经过上面的工作,一个独立模块的CRUD已经可以运行了,为了更好的可以看到其他自定义功能,我们做一个自...
  • jfok
  • jfok
  • 2014-10-16 16:29
  • 3950

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

常规功能和模块自定义系统 (cfcmms)—014模块自定义概述(1)

常规功能和模块自定义系统 (cfcmms)—014模块自定义概述   前面的章节讲了一些搭建系统和Extjs6的一些相关内容,这节开始介绍一下《常规功能和模块自定义系统》中的模块自定义的部分。  ...
  • jfok
  • jfok
  • 2015-11-04 10:09
  • 1984

常规功能和模块自定义系统 (cfcmms)—021自定义grid列(5附件列)

常规功能和模块自定义系统 (cfcmms)—021自定义grid列(附件个数)   模块列表Grid是由多个列组成的,在实际的系统构建过程中需要有一些自定义的类来完成一些特殊的功能。现在来看看一个...
  • jfok
  • jfok
  • 2015-12-05 21:29
  • 2247

常规功能和模块自定义系统(cfcmms)—004可自定义的项目

模块定义:用于配置所有的模块的信息及其之间的关系 模块的基本属性:主要属性有模块的名称、分组信息、在数据库中表名(视图、存贮过程或sql语句)、主键、可使用的权限、是否有附件、帮助内容等; 各字段及...
  • jfok
  • jfok
  • 2015-08-26 10:06
  • 2949

跟我一起学extjs5(11--自定义模块的设计)

跟我一起学extjs5(11--自定义模块的设计)        从这一节开始我们来设计并完成一个自定义模块。我们先来确定一个独立的模块的所能定义的一些信息。希望有新的想法的或者有建议的跟贴回复。 ...
  • jfok
  • jfok
  • 2014-07-08 15:28
  • 10695

ExtJS5 - 认识MVVM

ExtJS 5在原先支持MVC(Model-View-Controller)架构的基础上,新增了对MVVM(Model-View-ViewModel)架构的支持。MVVM架构的一大重要特性就是利用模型...

跟我一起学extjs5(21--模块Grid的多列表方案)

跟我一起学extjs5(21--模块Grid的多列表方案)         对于有很多字段的模块在一个grid中显示所有的字段,会显得很臃肿,对于不同的用户其侧重的字段类型也不尽相同,因此就有必要...
  • jfok
  • jfok
  • 2014-07-21 08:51
  • 9154

常规功能和模块自定义系统 (cfcmms)—037模块记录(数据)的权限设计(2)

037模块记录(数据)的权限设计(2)
  • jfok
  • jfok
  • 2016-04-02 17:16
  • 729

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

029开发日志(创建ManyToMany的column4)   根据以上几节的准备,在这一节中可以加入ManyToManyColumn.js了。先来看看做好的样子如下图:   单击文字链接可以显示...
  • jfok
  • jfok
  • 2015-12-31 15:39
  • 1551
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)