表格列过滤功能 [系列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; }