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

　　模块列表Grid是由多个列组成的，在实际的系统构建过程中需要有一些自定义的类来完成一些特殊的功能。现在来看看一个模块有了附件之后加入的附件列。如下图所示，在模块设置中设置了模块具有附件之后，就会在Grid方案的最前面加上一个附件列，显示的数字表示这条记录当前的附件个数。鼠标移动上去，可以显示这条记录的所有附件名称和附件文件的名称，单击可以进入附件浏览和管理的界面。

　　首先了解一下本系统中的附件是如何管理的。系统中的所有模块的附件是集中统一管理，所有的数据都放在表_Attachment中，在这个表里tf_moduleId对应模块的id号，tf_moduleIdvalue对应于该模块的记录id号。(本系统要求每个表都有唯一的单主键id)

　　在组织数据的时候，由于是sql语句是自己组织的，因此对于有附件的模块会先加入附件个数的查询。例如对于系统中的“省份”模块，在查询所有数据的时候会生成下面的sql语句。

    select
        ( select
            count(*) 
        from
            _Attachment 
        where
            tf_moduleId = '7010' 
            and tf_moduleIdValue = _t7010.tf_provinceId ) as tf_attachmentCount ,
        getAttachmentNames( '7010',
        _t7010.tf_provinceId ) as tf_attachmentTooltip ,
        _t7010.tf_provinceId as tf_provinceId ,
        _t7010.tf_name as tf_name ,
        _t7010.tf_shortname as tf_shortname ,
        _t7010.tf_district as tf_district ,
        _t7010.tf_area as tf_area ,
        _t7010.tf_numberOfPeople as tf_numberOfPeople ,
        _t7010.tf_GDP as tf_GDP ,
        ( _t7010.tf_GDP / _t7010.tf_numberOfPeople)  as tf_averageGDP ,
        _t7010.tf_percent as tf_percent ,
        _t7010.tf_isMunicipality as tf_isMunicipality ,
        _t7010.tf_createDate as tf_createDate ,
        ( (datediff(now(),
        _t7010.tf_createDate)))  as tf_days ,
        _t7010.tf_orderId as tf_orderId ,
        _t7010.tf_map as tf_map ,
        _t7010.tf_remark as tf_remark ,
        _t7010.tf_auditingName as tf_auditingName ,
        _t7010.tf_auditingDate as tf_auditingDate ,
        _t7010.tf_auditingRemark as tf_auditingRemark ,
        _t7010.tf_auditinged as tf_auditinged ,
        _t7010.tf_inputmen as tf_inputmen ,
        _t7010.tf_inputdate as tf_inputdate ,
        ( select
            count(*)  
        from
            City _t7012 
        left outer join
            Province _child_t7010 
                on _child_t7010.tf_provinceId = _t7012.tf_provinceId  
        where
            (
                (
                    _child_t7010.tf_provinceId=_t7010.tf_provinceId
                )
            ) ) as C_City    
    from
        Province _t7010 limit ?

　　在上面可以看到select后的第一个字段就附件个数的字段 tf_attachmentCount ，这一个比较好理解。第二个字段稍微有些意思，他返回的是附件的tooltip值，就是上面图片中的那4条记录，前面是附件的名称，后面跟着附件的文件名。这个功能是用自定义函数来完成的。函数的完整代码如下：这个函数入口参数有二个，一个是模块id,一个是记录id，返回的是一个字符串，里面把该记录的所有的附件的名称和文件名都加进去了。

CREATE DEFINER=`root`@`localhost` FUNCTION `getAttachmentNames`( 
	moduleid varchar(10) ,
	keyid varchar(50)) RETURNS varchar(4000) CHARSET gb2312
BEGIN
	DECLARE pid INT(11);
	DECLARE ptitle VARCHAR(50);
    DECLARE pfilename VARCHAR(250);
	DECLARE presult VARCHAR(4000) DEFAULT '';
    DECLARE done INT DEFAULT FALSE;
	DECLARE cur CURSOR FOR
		SELECT tf_attachmentId , tf_name ,tf_filename
			FROM _Attachment
			WHERE tf_moduleId = moduleid AND tf_moduleidvalue = keyid;
	DECLARE CONTINUE HANDLER FOR NOT FOUND SET done = TRUE;
    SET presult = '<ol class=\'gridcelltooltip\'>';
	OPEN cur;
    read_loop : LOOP
		FETCH cur INTO pid , ptitle ,  pfilename;
        IF done THEN
			LEAVE read_loop;
		END IF;
        IF pfilename is null THEN
			SET presult = concat( presult ,'<li>', ptitle ,'</li>');
        ELSE
			SET presult = concat( presult ,'<li>', ptitle , '(', pfilename, ')</li>');
        END IF;
	END LOOP;
	SET presult = concat(presult ,'</ol>');
	CLOSE cur;

	RETURN presult;
END

　　基于以上二个数据，我们的附件字段就可以创建完成了。我的要求是点击附件字段中的数字才能显示附件。而在没有附件的记录上点击是没有事件的。这个和cellclick又不太一样了。最初我是用的<a>标签来完成这样工作的。但是在<a>标签中的onclick并不能很好的和extjs结合。因此我想到了actionColumn的事件触发方法和我想要的类似，因此就去看了这个类的源码，发现了解决之道，源码如下，这是一个非常有用的功能，你可以在一个column中加入几个class,然后在processEvent中进行判断，这样就可以根据不同的文字执行不同的功能了。（在ＱＱ群里，有人问过如何实现这个功能，我在群里也回复过了，希望他能够看到篇文章）

/**
 * 具有附件的模块的显示附件个数的grid字段，可以显示附件的个数和tooltip，单击可以直接进入到此记录的附件列表及显示
 * 
 */

Ext.define('app.module.widget.column.AttachmentNumberColumn',
		{
			extend : 'Ext.grid.column.Column',
			alias : 'widget.attachmentnumbercolumn',
			dataIndex : 'tf_attachmentCount',
			text : '<span class="fa fa-paperclip"></span>',
			tooltip : '附件数',
			align : 'center',
			menuDisabled : true,
			sortable : true,
			resizable : false,
			locked : true,
			width : 36,
			renderer : function(val, metaData, model, row, col, store, gridview) {
				if (val) {
					metaData.tdAttr = 'data-qtip="' + model.get('tf_attachmentTooltip')
							+ '"';
					var result = '<span class="attachmentColumnNumber">'
							+ (val > 9 ? val : '0' + val) + '</span>';
					return result;
				}
			},

			processEvent : function(type, view, cell, recordIndex, cellIndex, e,
					record, row) {
				if (type === 'click') {
					// 如果鼠标是在附件个数上面点击的
					if (e.getTarget().className === 'attachmentColumnNumber') {
						// 打开浏览和管理附件的页面
						app.mainRegion.addParentFilterModule('_Attachment',
								record.module.tf_moduleName, record.get(record.idProperty),
								record.getTitleTpl(), {
									showAdditionView : true
								});
					}
				}
			}
		})

　　这个附件字段想扩充功能，也有很多种可能，比如说鼠标移动到数字上，可以显示tooltip,然后鼠标再移动到tooltip上的每一条记录上的时候，再显示该附件的预览。更好的一个显示tooltip的样式，可能是可以预览所有附件的缩略图，这个等以后有精力再改了。（思路就是修改上面的那个自定义的函数）

　　还准备加入的有，在这个column上点右键，会弹出右键菜单，里面可以直接新增上传附件，查看附件，下载附件等功能。