表格列过滤功能 [系列1]

注：用到prototype.js中的$("xxx")方法。

/**
 * columnFilter.js
 * 表格列过滤功能
 * tabObj 表格对象
 * 特点：
 * 1. 不支持单元格合并后的表格
 * 2. 不支持多列同时过滤，单次只弹出一个下拉狂
 * 3. 鼠标悬停在表格的标题行的某单元格上，指针呈现手型，单击即弹出下拉框，选择某个选项即可看到过滤效果
 *
 * Sample：
 * <script>
 *		//过滤
 *		var columnFilter = new ColumnFilter(document.getElementById("table1"));
 *		//参数"[1,2,3,4,5,6]"： 	给第2至7列增加过滤功能（列序号是从0开始计）,
 *      //参数"1":  				如果是动态生成不定数量的列，列数可能小于6，则给定一个参考列序号，添加过滤的列的最大序号，不会超过参考列序号，这里传"1"是表示：倒数第0、1列不加过滤功能。  
 *		columnFilter.doAddHandler([1,2,3,4,5,6],1);
 * </script>
 */
function ColumnFilter(tabObj){
	
	var _tabObj = tabObj;
	var rowNumber = _tabObj.rows.length;
	var colNumber = _tabObj.rows[0].cells.length;
	var filterCols; //参数,列序数组
	var maxCol; //如果列数是动态变化的,则用maxCol来表示需要过滤的最大列序
	var curCol;	//当前列序
	var select = ""; //下拉选项
	var originText; 
		
	//方法集合
	var methods = {
		/** 检查参数是否越界 */
		doCheckCol:function(col){
			if(col>colNumber-1){
				return false; 
			}
			return true;
		}, 
		/** 恢复列表的状态 */
		doResume:function(isChangeFilter){
			for(var i=1; i<rowNumber;i++){ 
				$("trr" + (i-1)).style.display="block";
			}
			
			//变更过滤条件
			if(isChangeFilter){
				if(this.curCol!=null && this.curCol!=undefined){
					_tabObj.rows[0].cells[this.curCol].innerHTML = "<div onclick='columnFilter.doRender(" + this.curCol + ");' style='width:100%;height:100%;' title='单击过滤'>" + this.originText + "</div>";
				}
			}
		},
		/** 过滤 */
		doFilter:function(obj,col){	
			var val = obj.options[obj.selectedIndex].value;
			if(val==this.originText){ 
				this.doResume(true);
				return;
			}
			 
			this.doResume();
			for(var i=rowNumber-1; i>0;i--){ 
				//alert("val=" + val + "; _tabObj.rows["+i+"].cells["+col+"].innerText="+_tabObj.rows[i].cells[col].innerText);
				if(_tabObj.rows[i].cells[col].innerText!=val){
					 $("trr" + (i-1)).style.display="none";
				}
			}
		},
		/** 去掉重复的过滤条件 */
		doRemoveDup:function(){
			var options = new Array(); 
			for(var i=1; i<rowNumber;i++){
				var dup = false;
				for(var j=0;j<options.length;j++){
					if(_tabObj.rows[i].cells[this.curCol].innerText==options[j]){
						dup = true;
						break;
					}
				}
				if(dup){continue;}
				options[options.length] = _tabObj.rows[i].cells[this.curCol].innerText; 
			}
			return options;
		},
		/** 生成过滤器 */
		doRender:function(col){ 
			//目前不支持多列过滤, 会将上次过滤的列恢复原状态 
			this.doResume(true);
			
			this.curCol = col;
			this.originText = _tabObj.rows[0].cells[this.curCol].innerHTML;
			select = "<select id='ddl_" + this.curCol + "' onchange='columnFilter.doFilter(this," + this.curCol + ");' style='width:100%;height:100%'>" + 
					 "<option value='" + this.originText + "'>" + this.originText + "</option>";
					 
			var options = this.doRemoveDup();
			for(var i=0;i<options.length;i++){
				select += "<option value='" + options[i] + "'>" +options[i] + "</option>";
			}
			select += "</select>";  
			_tabObj.rows[0].cells[this.curCol].innerHTML = "<div style='width:100%;height:100%;' >" +select + "</div>";
		},
		/** 绑定过滤事件 */
		/**
		 * cols 列序数组
		 * lastIndexOfMaxCol 首个无过滤条件的列的逆序
		 */
		doAddHandler:function(cols, lastIndexofMaxCol){ 
			//列表内容行不能为空
			if($("trr0")==undefined){return;}
		 
			this.filterCols = cols;
			if(this.filterCols==undefined || this.filterCols.length==0){return;} 
			if(lastIndexofMaxCol!=undefined){
				this.maxCol = colNumber - lastIndexofMaxCol - 2;
			}
			 
			for(var i=0; i<this.filterCols.length;i++){
				var col = this.filterCols[i];
				if(!this.doCheckCol(col)){return;}
				if(this.maxCol!=undefined){
					if(col>this.maxCol){return;}
				}
				
				//给col列Header增加单击事件
				var headerText = _tabObj.rows[0].cells[col].innerHTML;
				_tabObj.rows[0].cells[col].innerHTML = "<div onclick='columnFilter.doRender(" + col + ");' style='width:100%;height:100%;cursor:hand;' title='单击过滤'>" + headerText + "</div>";
			}
		}
	};
	
	return methods; 
}

后续会介绍[系列2], 其将实现:
1. 支持单元格合并后的表格
2. 支持多列同时过滤