常规功能和模块自定义系统 (cfcmms)—020自定义grid方案(4改成任意层表头)

原创 2015年11月23日 08:59:50

常规功能和模块自定义系统 (cfcmms)—020自定义grid方案(4改成任意层表头)


  在现在的系统中grid表头是可以分组的,但是只能分一层,现在我想把它改成可以分成多层的。比如象这样的表头:


  如何在不改动配置信息的情况下来完成这个改动呢。多层表头如果每一个表头都保存成一条记录的话,那么就必须是树状结构。树状结构在我这系统里有二种,一种是pid-id类型的,还有一种是根据编码级数来管理的。用pid-id的这种改动比较大,那就使用分级的来操作。在“模块字段分组”中有一个顺序号,原来只是放分组顺序的,把这个字段复用一下,可以来完成我们的功能。例如原来的顺序号为10,20,现在改一下规则,把1010,1020的顺序号作为10顺序号的下级层。这样就很方便的解决了分层数据的定义。当然这样最多可能只有4层表头,因为第4层是8位数了,10位数就可能超过了整数所能保存的最大数了。
  设计好以上内容,就可以来进行修改了,后台传过来的数据结构仍然不变,我们需要在生成grid 方案的时候,把分组的层级信息重新按照顺序号整理一下即可。这里需要一个递归的函数来操作。递归是我这个系统用得很多的方法,用得好程序会变得非常简单。经过3个小时的工作,终于把这段程序调试好。
						/**
						 * 根据module的定义和schemeOrderId返回此列表方案的多层表头定义
						 */
						getColumnsWithMult : function(module, schemeOrderId) {

							var scheme = module.getGridScheme(schemeOrderId); // 当前选中的gridScheme
							// tf_orderid是二位数的,是最顶层,4位数的是第二层
							for (var i = scheme.tf_schemeGroups.length - 1; i >= 0; i--) {
								var sg = scheme.tf_schemeGroups[i];
								if (('' + sg.tf_gridGroupOrder).length > 2) {
									// 不是二位数,那么就不是顶层,将非顶层放在一块,看看能不能找到他的直接父层。
									// 如果找到了,就把自己加在父层的 columns 里面
									var subOrder = '' + sg.tf_gridGroupOrder;
									for (var j = i - 1; j >= 0; j--) {
										var parent = scheme.tf_schemeGroups[j];
										var parentOrder = '' + parent.tf_gridGroupOrder;
										if (parentOrder.length == subOrder.length - 2
												&& subOrder.substring(0, parentOrder.length) == parentOrder) {
											// 如果是直接的父级
											if (!parent.columns)
												parent.columns = [];
											parent.columns.unshift(scheme.tf_schemeGroups.pop());
											break;
										}
									}
								}
							}
							var columns = this.getLockedLeftColumns(module);
							// 递归生成grid 的 columns
							return columns.concat(this.addGroupAndField(module,
									scheme.tf_schemeGroups));
						},

						/**
						 * 生成指定数组定义的列表组和列表,这是一个递归调用的函数。
						 */
						getGroupAndField : function(module, groups) {
							var result = [];
							for ( var i in groups) {
								var sg = groups[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 field = this.createColumn(module, sg, gf);
									if (field)
										if (isgroup) {
											this.canReduceTitle(group, field);
											group.columns.push(field);
										} else
											result.push(field);
								}
								if (isgroup) {
									result.push(group);
								}
								// 本分组下如果还有下层分组,则递归调用本函数
								if (sg.columns) {
									var subColumns = this.getGroupAndField(module, sg.columns);
									for ( var k in subColumns)
										if (isgroup)
											group.columns.push(subColumns[k])
										else
											result.push(subColumns[k])
								}
							}
							return result;
						},

						/**
						 * 建立一个列
						 */
						createColumn : function(module, group, groupfield) {
							var fd = module.getFieldDefine(groupfield.tf_fieldId);
							var field;
							if (fd) {
								if (fd.tf_isHidden)
									return null;
								field = this.getColumn(groupfield, fd, module);
							} else { // 如果不是本模块的基本字段,那么在附加字段中找(可能是父模块,祖父模块的字段,或者子模块的聚合字段)
								var fd = module.getAdditionFieldDefine(groupfield.tf_fieldId);
								field = this.getColumn(groupfield, fd, module);
								if (field.dataIndex.search('C_') == 0) {
									field.moduleName = field.dataIndex.slice(2);
									field.renderer = this.childCountFieldRenderer;
								}
							}
							field.locked = group.tf_isLocked || groupfield.tf_isLocked;
							// 如果列显示字段有附加的属性,如renderer 可以放在这里加入进去
							if (groupfield.tf_otherSetting) {
								try {
									eval('Ext.apply(field,{' + groupfield.tf_otherSetting + '})');
								} catch (err) {
									console.log(groupfield.tf_otherSetting + '解析出错。');
								}
							}
							return field;
						},

						getLockedLeftColumns : function(module) {
							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'
								})
							}
							return columns;
						}

  为了达到最上面的那个图的效果,我们需要在模块字段分组定义中做如下的定义。

  定义好了多层表头以后,发现排序不对。默认排序是根据列表方案+分组序号,而分组序号又是整型的。因此需要改一下分组序号的排序表达式。将分组序号表达式改为:_t990201.tf_gridSchemeId,cast(tf_gridGroupOrder as char(12))  后,默认的排序字段将改为按字符串排。这样将会是我们想要的结果了。



  对比上面的设置,就能看到是如何生成最上面一张图的grid 的分组。(导出Excel中的还是单层的,那个要加到多层的,需要到java里去解析多层表头的生成并写到单元格中)

  这套系统还在不断的完善和新增功能之中。上面的这个过程基本上就是我新增功能的步骤了,想到一个主意或功能后,先把它变得可配置化,然后前后台协同操作来完成功能。做好一个功能以后,其他的模块要用的话,只要配置一下就可以重复使用了。

  

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

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

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

常规功能和模块自定义系统 (cfcmms)—011选择菜单后的执行过程

常规功能和模块自定义系统 (cfcmms)—011选择菜单后的执行过程   菜单的生成具体见下面一段代码,getMenus获取第一层菜单的items,在getaMenu函数中用了递归来生成各级子菜...
  • jfok
  • jfok
  • 2015年10月02日 19:55
  • 2699

常规功能和模块自定义系统 (cfcmms)—041模块附加字段和新的Grid方案设计器

041模块附加字段的设计   在整个自定义系统,模块附加字段也是有必要的。对于一个模块来说附加的字段有二种,一种是父模块中的字段,另一种是子模块中的聚合字段。在模块记录生成sql语句的时候,只是生成了...
  • jfok
  • jfok
  • 2016年05月10日 09:43
  • 1397

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

常规功能和模块自定义系统 (cfcmms)—018自定义grid方案(2)   下面来看看在系统中如何定义一个grid方案。当前定义grid方案也是采用对记录模块操作的方式,并没有采用所见即所得得...
  • jfok
  • jfok
  • 2015年11月20日 09:19
  • 2338

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

常规功能和模块自定义系统 (cfcmms)—017自定义grid方案   在定义好了模块和字段这二个最基本的系统元素之后,就可以开始其他功能的加入了。最先想到的功能应该就是grid了。   gri...
  • jfok
  • jfok
  • 2015年11月19日 10:56
  • 1963

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

常规功能和模块自定义系统 (cfcmms)—019自定义grid方案(3)   这一节开始进入自定义的内部,来看看第一个自定义的功能是如何实现的。    1、在系统登录的时候,将所有的登录用户有权...
  • jfok
  • jfok
  • 2015年11月20日 11:27
  • 1907

常规功能和模块自定义系统 (cfcmms)—053把一对多(OneToMany)字段的grid加入到form中

053把一对多(OneToMany)字段的grid加入到form中   前二章中加入了oneToMany字段,并且加入到form中显示条数,并且有一个按钮可以用来打开oneToMany的模块来进行...
  • jfok
  • jfok
  • 2016年07月08日 16:39
  • 756

常规功能和模块自定义系统 (cfcmms)—042模块Grid的排序和筛选

pagingtoolbar042模块Grid的排序和筛选   一、排序   Grid界面排序可以点击列头直接来进行,这个是很方便。但是还有二个问题需要解决:无法取消排序至默认,单字段和多字段排序不可以...
  • jfok
  • jfok
  • 2016年05月13日 10:13
  • 1188

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

029开发日志(创建ManyToMany的column4)   根据以上几节的准备,在这一节中可以加入ManyToManyColumn.js了。先来看看做好的样子如下图:   单击文字链接可以显示...
  • jfok
  • jfok
  • 2015年12月31日 15:39
  • 1705

常规功能和模块自定义系统 (cfcmms)—022自定义grid列(6图标列)

常规功能和模块自定义系统 (cfcmms)—022自定义grid列(6图标列)   某些模块可能需要一个记录图标...
  • jfok
  • jfok
  • 2015年12月08日 10:15
  • 1380
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:常规功能和模块自定义系统 (cfcmms)—020自定义grid方案(4改成任意层表头)
举报原因:
原因补充:

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