js组件 - 自定义下拉框条件区间选择组件（1.0.2V）

/*
 * Kali Custom drop-down box assembly 1.0.2
 *
 * Copyright (c) 2013 Kalision.z
 * 
 * Date: 2013-08-06
 * 
 * Kali Interval query component
 */

/*
 * 入口方法，页面加载完成自动调用
 * 动态创建区间查询组件
 */
function kiqc(str){
	var strarr = new Array();
	strarr = str.split(",");
	for (var i = 0; i < strarr.length; i++)
	{
		var div_id = new String(strarr[i]);
		var display_name = document.getElementById(strarr[i]).getAttribute("displayname");//显示名
		var colum_name = document.getElementById(strarr[i]).getAttribute("columname");//字段名
		var first_min_value = document.getElementById(strarr[i]).getAttribute("firstminvalue");//第一个条件最小值
		var first_max_value = document.getElementById(strarr[i]).getAttribute("firstmaxvalue");//第一个条件最大值
		var second_min_value = document.getElementById(strarr[i]).getAttribute("secondminvalue");//第二个条件最小值
		var second_max_value = document.getElementById(strarr[i]).getAttribute("secondmaxvalue");//第二个条件最大值
		
		document.getElementById(strarr[i]).innerHTML = display_name +
	    		"<select name='sjkrsel" + strarr[i] + "' id='"+div_id+"' display_name='"+display_name+"' colum_name='"+colum_name+"'" +
	    		"οnchange='setSelectKiqcValueAndForwardCustom(this);'>" +
	   			"<option value=''>--请选择--</option>" +
	    		"<option value='" + first_min_value + "_" + first_max_value + "'>" + first_min_value + "-" + first_max_value + "</option>" +
	    		"<option value='" + second_min_value + "_" + second_max_value + "'>" + second_min_value + "-" + second_max_value + "</option>" +
	    		"<option value='customselect'>自定义选择</option></select>" +
	    		"<input type='hidden' name='customminvaluie" + strarr[i] +"' id='customminvalue" + strarr[i] +"' value=''/>" +
	    		"<input type='hidden' name='custommaxvaluie" + strarr[i] +"' id='custommaxvalue" + strarr[i] +"' value=''/>" +
	    		"<input type='hidden' name='" + colum_name + "' id='kiqcvalue" + strarr[i] +"' value=''/>";
	}

}
/**
 * 下拉选择区间
 * 赋值给最终值传递Hidden域
 * 
 * 和
 * 
 * 转到自定义选择区间界面
 */
function setSelectKiqcValueAndForwardCustom(sele){
	var selectid = sele.id;
	var display_name = sele.display_name;
	var colum_name = sele.colum_name;
	var selectName = "sjkrsel" + selectid;
	var sel = document.getElementsByName(selectName)[0];
	var selvalue = sel.options[sel.options.selectedIndex].value;
	var strs= new Array();
	strs = selvalue.split("_");
	document.getElementById("customminvalue" + selectid).value = strs[0];
	document.getElementById("custommaxvalue" + selectid).value = strs[1];
	document.getElementById("kiqcvalue" + selectid).value = strs[0] + "," + strs[1];
	if(selvalue == 'customselect'){
		document.getElementById(selectid).innerHTML = display_name +
				"<input type='text' id='customminvalue"+ selectid +"' name='"+ selectid +"' size='2' onChange='setCustomKiqcValue(this);'/>-" +
				"<input type='text' id='custommaxvalue"+ selectid +"' name='"+ selectid +"' size='2' onChange='setCustomKiqcValue(this);'/>" +
				"<input type='hidden' name='" + colum_name + "' id='kiqcvalue"+ selectid +"' value=''/>";
	}
}
/**
 * 自定义选择区间
 * 赋值给最终值传递Hidden域
 */
function setCustomKiqcValue(input){
	var selectid = input.name;
	document.getElementById("kiqcvalue" + selectid).value = 
		document.getElementById("customminvalue" + selectid).value +
		"," + 
		document.getElementById("custommaxvalue" + selectid).value;
}


/*
 * Kali 自定义下拉框，条件区间选择组件
 * 
 * 使用说明：
 * 
 * -------------------------------------------------------
 * 1: 引用此js文件到页面文件中。
 * -------------------------------------------------------
 * 
 * 例如：<script type="text/javascript" src="../common/js/kiqc.js"></script>
 * 
 * -------------------------------------------------------
 * 2：在使用的Jsp或者其他页面中创建组件DIV层,可以创建多个组件。
 * -------------------------------------------------------
 * 	     如果创建多个组件，div的id，columname属性必须具有唯一性。
 * 
 * 例如：单个组件：
 * 		<div id="kdiv" displayname="按剩余量查询：" columname="wkk.syl" firstminvalue="10" firstmaxvalue="20" secondminvalue="100" secondmaxvalue="200"></div>
 * 
 * 		多个组件:
 * 		<div id="kdiv_1" displayname="按剩余量查询：" columname="wkk.syl" firstminvalue="10" firstmaxvalue="20" secondminvalue="100" secondmaxvalue="200"></div>
 * 		<div id="kdiv_2" displayname="按销售量查询：" columname="wkk.xsl" firstminvalue="100" firstmaxvalue="200" secondminvalue="1000" secondmaxvalue="2000"></div>
 * 		
 * 解释：[div]:
 * 				id				属性不可改变。只能是kdiv，否则无法创建组件。 必须拥有此属性。
 * 				displayname		属性为页面中下拉框的说明文字，可根据需求进行改变，可为空值。必须拥有此属性。
 * 				columname		属性为对应后台bean的属性名称或者数据库字段名称，还可以是在后台取值的名称。必须拥有此属性。
 * 				firstminvalue	属性为第一个区间的起始值（最小值）。 必须拥有此属性。
 * 				firstmaxvalue	属性为第一个区间的结束值（最大值）。 必须拥有此属性。
 * 				secondminvalue	属性为第二个区间的起始值（最小值）。必须拥有此属性。
 * 				secondmaxvalue	属性为第二个区间的结束值（最大值）。必须拥有此属性。
 * 
 * -------------------------------------------------------
 * 3：在页面加载事件中调用kiqc()函数，并传递定义的所有查询组件的id。
 * -------------------------------------------------------
 * 
 * 例如：单个组件：
 * 		<body οnlοad="kiqc('kdiv');">
 * 
 * 		多个组件：
 * 		<body οnlοad="kiqc('kdiv_1,kdiv_2');">
 * 
 * -------------------------------------------------------
 * 4: 后台获取区间值的方法。
 * -------------------------------------------------------
 * 
 * 解释：前台页面div columname属性定义的值为后台获取的参数名称。
 * 		 1：可以通过序列化的实体对象直接获得（前提：columname定义的值必须和实体对象的某个属性保持一致）
 * 		 2：通过request.getParameter("?");方式获取。?代表columname定义的值。
 * 
 * -------------------------------------------------------
 * 5: 如何解析获取到的区间值。
 * -------------------------------------------------------
 * 
 * 解释：后台通过以上方法获取到的值是又组件自动拼接好的字符串，需要手工解析。
 * 		拼接的区间值格式：minValue,maxValue
 *		解析方法：Java：
 *					  String str = request.getParameter("?");//'?'的解释见以上叙述
 *					  String strarr[] = str.split(",");
 *					  
 *					  String minValue = strarr[0];
 *					  String maxValue = strarr[1];
 *
 *		最终minValue和maxValue既是获得到的区间值。
 *		例如查询老师数据库表中老师年龄在30-45之间的sql语句：
 *		DemoSql:  SELECT * FROM TEACHER WHERE AGE > '"+minValue+"' AND AGE < '"+maxValue+"' ORDER BY ID DESC
 * 
 */