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+"'" +    "onchange='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 onload="kiqc('kdiv');"> *  * 多个组件： * <body onload="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 *  */