表格列过滤功能 [系列2]
================================================================================================
本系列sample是工作中自己的积累， 提供给大家交流；
如果有好的意见或建议，欢迎撇砖
================================================================================================
columnFilter.js
/** * 表格过滤功能 * tabObj 表格对象 * 特点： * 1. 支持单元格合并后的表格; * 2. 支持多列同时过滤; * 3. 对外部提供接口：callSetFilterFunc,callDataFunc,callSetDefaultFunc分别调用外部的动态获取下拉框选项、给过滤的下拉框设定默认选项、保存所设置的过滤条件到页面hidden; * 4. 过滤的触发交给页面的查询按钮; * * Sample： * <script> * var params = { *filterCols:[1,2,3,4,5,6], //参数"[1,2,3,4,5,6]"：给第2至7列增加过滤功能（列序号是从0开始计） *lastIndexOfMaxCol:1,//右边起，最后一个无过滤条件的列的逆序号，从0开始计 *callDataFunc:getFilterOptions,//动态获取下拉框选项数据 *callSetDefaultFunc:setDefaultCondition,//给过滤的下拉框设定默认选项 *callSetFilterFunc:setFilter,//保存过滤下拉框的选项 *headerRow:1//列表表头行序号,默认是0 *}; *var columnFilter = new ColumnFilter($("tabDecisionPath")); *columnFilter.addHandler(params); * </script> */function ColumnFilter(tabObj){// 表格对象var _tabObj = tabObj; //表格列数var colNumber;//如果列数是动态变化的,则用maxCol来表示需要过滤的最大列序 var maxCol; //下拉选项var select = "";//参数var params = {//要添加过滤功能的列的数组//filterCols: [1,2,3,4,5,6],//右边起，最后一个无过滤条件的列的逆序号，从0开始计//lastIndexOfMaxCol:1,//动态获取下拉框选项数据//callDataFunc:getFilterOptions,//给过滤的下拉框设定默认选项//callSetDefaultFunc:setDefaultCondition,//保存过滤下拉框的选项//callSetFilterFunc:setFilter,//列表表头行序号,默认是0headerRow: 0};//方法集合var methods = {/** 检查参数是否合法 */doCheckParams:function(parameters){if(parameters.filterCols==null || parameters.filterCols==undefined || parameters.filterCols.length==0){return false;};if(parameters.lastIndexOfMaxCol==null || parameters.lastIndexOfMaxCol==undefined){return false;};if(parameters.callDataFunc==null || parameters.callDataFunc==undefined){return false;};if(parameters.callSetDefaultFunc==null || parameters.callSetDefaultFunc==undefined){return false;};if(parameters.callSetFilterFunc==null || parameters.callSetFilterFunc==undefined){return false;};if(parameters.headerRow==null || parameters.headerRow==undefined){parameters.headerRow=params.headerRow;};this.params = parameters;return true;},/** 检查参数是否越界 */doCheckCol:function(col){if(col>colNumber-1){return false; }return true;},/** 过滤 */setFilterValue:function(obj,col){var val = obj.options[obj.selectedIndex].value;if(obj.selectedIndex==0){val = "";}var originText = obj.options[0].value;this.params.callSetFilterFunc({key:originText, value:val});},/** 生成过滤器 */doRender:function(col, headerText){var curCol = col;//拼装下拉框select = "<select id='" + headerText + "' onchange='columnFilter.setFilterValue(this," + curCol + ");' style='width:100%;height:100%'>" + "<option value='" + headerText + "'>" + headerText + "</option>"; var optionsStr =this.params.callDataFunc(headerText);if(optionsStr==""){return false;}var options = [];options = optionsStr.split("|");for(var i=0; i<options.length; i++){var arr = options[i].split(",");options[i]={id:arr[0],name:arr[1]};}for(var i=0;i<options.length;i++){select += "<option value='" + options[i].id + "'>" +options[i].name + "</option>";}select += "</select>";_tabObj.rows[this.params.headerRow].cells[curCol].innerHTML = "<div style='width:100%;height:100%;' >" +select + "</div>";return true;}, /** * 给过滤的下拉框设定默认选项 */setDefault:function(headerText){this.params.callSetDefaultFunc($(headerText));},/** * 绑定过滤事件 * params 参数 */addHandler:function(parameters){//检查参数是否合法if(!this.doCheckParams(parameters)){alert("参数错误!");return;} //列表内容行不能为空if($("trr0")==undefined){return;} if(this.params.filterCols==undefined || this.params.filterCols.length==0){return;}colNumber = _tabObj.rows[this.params.headerRow].cells.length;maxCol = colNumber - this.params.lastIndexOfMaxCol - 2;for(var i=0; i<this.params.filterCols.length;i++){var col = this.params.filterCols[i];if(!this.doCheckCol(col)){return;}if(maxCol!=undefined){if(col>maxCol){return;}}//给第col列Header增加单击事件 var headerText = _tabObj.rows[this.params.headerRow].cells[col].innerText;//生成过滤下拉框if(!this.doRender(col, headerText)){continue;}//设置下拉框默认选项this.setDefault(headerText);}}};return methods; }<%@ page contentType="text/html;charset=gbk"%><SCRIPT>//...部分无关js略去/** * 查找某个指标的所有约束条件 * indexName 指标名称，如：AADT, PCI, RQI, PSSI, RDI, SRI * return: options sample:"8a819be52af9ed05012afa1dc007000d","重交通(>=8000)"|"8a819be52af9ed05012afa1e087a000e","中交通(8000->4000)" */function getFilterOptions(indexName){var options;var parameters = "indexStr=" + indexName + "&surfaceType=" + $("surfaceType").value + "&roadGrade=" + $("roadGrade").value; var url = "<ww:url value='/decisionPath!getFilterOptions.action'/>";var ajax = new Ajax.Request(url,{method:'post',parameters:parameters,requestHeaders:{dynenc:"UTF-8"},asynchronous: false,onComplete:function(oriReq){ options=oriReq.responseText.trim();}})return options;}/** * 给过滤的下拉框设定默认选项 * selObj: 下拉框对象 */function setDefaultCondition(selObj){ if($("decisionPath." + selObj.id + "Id").value!=""){selObj.value = $("decisionPath." + selObj.id + "Id").value;}}/** * 保存过滤查询条件 */function setFilter(condition){document.getElementById("decisionPath." + condition.key + "Id").value = condition.value;}</SCRIPT> <BR><form name="actionForm" method="post"> <table align="center" cellspacing="1" cellpadding="1" width="100%" border="0" id="tabDecisionPath"> //....中间表格内容略 </table></form><SCRIPT LANGUAGE="JavaScript">doInit();var params = {filterCols:[1,2,3,4,5,6],lastIndexOfMaxCol:1,callDataFunc:getFilterOptions,callSetDefaultFunc:setDefaultCondition,callSetFilterFunc:setFilter,headerRow:1};var columnFilter = new ColumnFilter($("tabDecisionPath"));columnFilter.addHandler(params);</SCRIPT>