报表列过滤功能 [系列1]
表格列过滤功能 [系列1]
注：用到prototype.js中的$("xxx")方法。
后续会介绍[系列2], 其将实现:
1. 支持单元格合并后的表格
2. 支持多列同时过滤
注：用到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. 支持多列同时过滤