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

常规功能和模块自定义系统 (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里去解析多层表头的生成并写到单元格中）

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