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

最新推荐文章于 2024-09-18 10:50:40 发布

最新推荐文章于 2024-09-18 10:50:40 发布 · 309 阅读

文章标签：

#交通 #Ajax #JSP

js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个用于表格数据过滤的功能实现方案，支持单元格合并及多列同时过滤，并提供了动态获取下拉框选项、设定默认选项等功能。

================================================================================================
[b][size=x-large][color=blue]本系列sample是工作中自己的积累，提供给大家交流；
如果有好的意见或建议，欢迎撇砖[/color][/size] :D [/b]
================================================================================================
[b][size=x-large]columnFilter.js[/size][/b]


/**
 * 表格过滤功能
 * 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,
		//列表表头行序号,默认是0
		headerRow: 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; 
}

[b]
[size=x-large]list.jsp[/size][/b]


<%@ 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 class="table-border" 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>