Combo通用类型封装
1.Combobox封闭
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>润颐科技</title><style type="text/css"></style><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/base.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css"><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/index.js"></script><!--script type="text/javascript" src="${pageContext.request.contextPath}/js/view/esm/usermanager/create_user.js"></script--><script type="text/javascript">/** * */function runyi_Combobox() {}function ComboObj(text,value) {this.text = text;this.value = value;}//Combobox数据存储容器var comboboxStore = new Array();var index = 0;/** * * 组件值对象 * Combobox值对名胜 * formObjId hidden 用户表单提交值对象ID * value <option value="">所选择对象的值 * text <option>text</option> 所选择对象显示内容 * itemId 所选项目id * */function ComboxVoObj(formObjId,name,value,text,itemId) {this.formObjId = formObjId;this.name = name;this.value = value;this.text = text;this.itemId = itemId;} /** * 初始化数据 */function comboboxInitData() {var combobox_zk = "combobox_zk";//解析页面中存在的数据select 数据$("." + combobox_zk).each(function(){//隐式存值input 对象Idvar hidId = $(this).attr("name") + "_hidden";var name = $(this).attr("name");//加载页面初始数据并存入Combobox容器中$(this).find("option").each(function(){var comboxVoObj = new ComboxVoObj(hidId,name,$(this).val(),$(this).text(),"combox_item_" + (index + 1));comboboxStore[index++] = comboxVoObj;});$(this).after("<dd class="cr_role_t cr_select_box">" + "<div class="select_box">" + "<input type="hidden" class="select_value" name="" + name + "" id="" + hidId + "" value="" />" + "<span class="select_txt" id="" + name + "_show_input"></span>" + "<a class="select_open icon16 gray_arrow_b"></a>" + "<div class="select_option" id="" + name + "_show_bar">" + "</div>" + "</div>" + "</dd>");//添加显示层级var layout_z_index = 1000;$(".cr_select_box").each(function(){$(this).css({"z-index":--layout_z_index});});//显示对应的combobox[区域]var select_combox = $("#" + name + "_show_bar");//清空显示区域内容$(select_combox).empty();for (var i = 0; i < comboboxStore.length; i++) {//判断是否为对应组件if (name+"_hidden" == comboboxStore[i].formObjId) {select_combox.append("<a class="select_item" id="" + comboboxStore[i].itemId + "" style="height:20px;">" + comboboxStore[i].text + "</a>");}}var showText = $(this).find("option:selected").text();$("#" + name + "_show_input").text(showText);$("#" + name + "_hidden").val($(this).val());$(this).attr("name",name + "_hidden");});comboboxInitEvent();//对显示项添加鼠标移动事件 $(".select_item").each(function(){$(this).hover( function(){ $(this).addClass("item_selected");},function(){ $(this).removeClass("item_selected");});});}/** * 组件事件添加 */function comboboxInitEvent() {//添加显示项点击事件$(".select_item").click(function(){//$(this).addClass("item_selected");var item = $(this);for (var i = 0; i < comboboxStore.length; i++) {var id = $(item).attr("id");var storeItem = comboboxStore[i];//判断当前ID是否与存储内容相等if (id == storeItem.itemId) {//alert("id" + id + " itemId" + storeItem.itemId + " name:" + storeItem.name);$("#" + storeItem.id).val(storeItem.value);//显示选择输出值 $("#" + storeItem.name + "_show_input").text(storeItem.text);$("#" + storeItem.name + "_hidden").val(storeItem.value);//$("#" + storeItem.name + "_show_bar").hide();}}});$(".select_box").click(function(){/**select_combox.append("<a class="select_item" id="" + comboboxStore[i].itemId + "" style="height:20px;">" + comboboxStore[i].text + "</a>");**/var select_option = $(this).find(".select_option");//alert("xxx" + $(select_option).attr("id") + " 000===");if ($(select_option).is(":hidden")) {$(select_option).show();}else {$(select_option).hide();}});} /** * * * 启动加载 * **/ $(document).ready(function(){comboboxInitData(); }); runyi_Combobox.addItemEvent = function addSelectItemEvent() { $(".select_item").click(function(){//$(this).addClass("item_selected");var item = $(this);for (var i = 0; i < comboboxStore.length; i++) {var id = $(item).attr("id");var storeItem = comboboxStore[i];//判断当前ID是否与存储内容相等if (id == storeItem.itemId) {//alert("id" + id + " itemId" + storeItem.itemId + " name:" + storeItem.name);$("#" + storeItem.id).val(storeItem.value);//显示选择输出值 $("#" + storeItem.name + "_show_input").text(storeItem.text);$("#" + storeItem.name + "_hidden").val(storeItem.value);//$("#" + storeItem.name + "_show_bar").hide();}}}); } /** * 添加(name[select name],text[<option> text</option>],value[<option value="">]) **/ runyi_Combobox.addOptiton = function(name,text,value) { var hidId = name + "_hidden"; var comboxVoObj = new ComboxVoObj(hidId,name,value,text,"combox_item_" + (index + 1)); var i = index++; comboboxStore[i] = comboxVoObj; $("#" + name + "_show_bar").append("<a class="select_item" id="" + comboboxStore[i].itemId + "" style="height:20px;">" + comboboxStore[i].text + "</a>"); runyi_Combobox.addItemEvent(); }; /** * 定义定位方法 * **/ Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1; }; /** * * 删除数据 * * **/ Array.prototype.remove = function(val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } }; /** * 从新加载数据 * */ runyi_Combobox.reloadData = function(name,arraydata) { runyi_Combobox.clear(name); for (var i = 0; i < arraydata.length; i++) { var comboObj = arraydata[i]; if (comboObj instanceof ComboObj) { runyi_Combobox.addOptiton(name,comboObj.text,comboObj.value); } } }; /** * * * 删除指定项 name 和key * * **/ runyi_Combobox.removeOption = function(name,value) { $("#" + name + "_show_bar").find(".select_item").each(function(){ var select_item = $(this); var id = $(this).attr("id"); for (var i = 0; i < comboboxStore.length; i++) { if (comboboxStore[i].name == name && comboboxStore[i].itemId == id ) { comboboxStore.remove(i); $(select_item).remove(); break; } } }); }; /** * * * 清空对应域数据 * **/ runyi_Combobox.clear = function(name) { for (var i = 0; i < comboboxStore.length; i++) { if (comboboxStore[i].name == name) { comboboxStore.remove(i); //删除指定元素 $("#" + comboboxStore[i].itemId).remove(); $("#" + comboboxStore[i].name + "_show_input").text(""); } } }; /** * * 设置显示的值 * **/ runyi_Combobox.setSelectOption = function(name,value) { for (var i = 0; i < comboboxStore.length; i++) { var selected = comboboxStore[i]; if (selected.name == name && selected.value == value) { $("#" + selected.formObjId).val(selected.value); $("#" + selected.name + "_show_input").text(selected.text); } } }; function loadDataTest() { var data = new Array(); var i = 0; //ComboObj data[++i] = new ComboObj("刘庆",1001); data[++i] = new ComboObj("项目管理",1002); data[++i] = new ComboObj("流程管理",1003); runyi_Combobox.reloadData("roleType",data); } </script><script type="text/javascript">function submitForm(idname) {$("#mask").show();setTimeout(function(){$("#" + idname).submit();},200);}</script></head><body><!--[if lte IE 6]><script src="../js/DD_belatedPNG_0.0.8a.js"></script><script>DD_belatedPNG.fix('.logo a ,.active a , .a_active h3 a , .a_active h3 a:hover ,.cs_nav_btn2 em ,.cs_nav_btn1 em ,.icon16 ,.icon32,.icon38');document.execCommand("BackgroundImageCache",false, true);window.onload = function(){var aDiv= document.getElementById("ie6_warning");var aA = document.getElementById("close_warning");aA.onclick = function(){aDiv.style.display = "none" ;}}</script> <div id="ie6_warning"><div target="_blank">IE8</a>或以下浏览器：</p><p><a href="http://www.firefox.com.cn/download/" target="_blank">Firefox</a>|<a href="http://www.google.cn/chrome" target="_blank">Chrome</a>|<a href="http://www.apple.com.cn/safari/" target="_blank">Safari</a>|<a href="http://www.Opera.com/" target="_blank">Opera</a></p></div><a id="close_warning" href="javascript:;"></a></div><![endif]--> <!--header--><div title="润颐科技">润颐科技</a></h1><div href="javascript">admin</a><a href="#">[退出]</a> | <a href="#">帮助中心</a></div></div></div><div id="fixedMenu" ><ul id="nav_list"><li><a href="index.html">首页</a></li><li><a href="operation.html">运营管理</a></li><li><a href="setting.html">应用设置</a></li><li name="form" action="${pageContext.request.contextPath}/esm/user_manager/role/update.htm" method="post"><div name="roleid" value="${roleInfoVo.id }" /></a></h3><i name="rolename" value="${roleInfoVo.title}" /><input type="button" onclick="javascript:runyi_Combobox.addOptiton('roleType','liuqing','12');" value="add" /><input type="button" onclick="javascript:runyi_Combobox.clear('roleType')" value="clear"/><input type="button" onclick="javascript:loadDataTest()" value="loadDataTest"/><input type="button" onclick="javascript:runyi_Combobox.setSelectOption('roleType',1002)" value="selectOption"/></dd></dl><dl name="roleType" style="display:none;"> <c:forEach var="roleInfo" items="${roleInfoTypes}"><option value="${roleInfo.id}" <c:if test="${roleInfo.id == 1}"> selected="selected" </c:if> >${roleInfo.title}</option></c:forEach></select><dd /><input type="submit" value="确 定" /></div></dd></dl><dl name="roleStatus" style="display:none;"><option value="1">激活</option><option value="2">禁用</option></select></dl><dl cellspacing="0" var="perType"><tr><td value="${perType.id}" <c:if test="${perType.selectedValueState == 1 }"> checked="checked" </c:if> onclick="permissType(this)" name="allowPermisson" /><span>${perType.titlecn}</span></label></td><td id="item_${perType.id}"><ul var="perSub"><li><label><input type="checkbox" name="allowPermisson" <c:if test="${perSub.selectedValueState == 1 }"> checked="checked" </c:if> value="${perSub.id}" /><span>${perSub.titlecn}</span></label></li> </c:forEach></ul></td></tr></c:forEach></tbody></table></div></dd></dl><dl name="remark" href="javascript:;">取消</a><a onclick="submitForm('form')" href="javascript:;">保存</a></div></div></div></form></div></div></div><!-- end a_content --><div ><div ><li><a href="javascript:;">标题标题标题标题标题</a><div /><input type="submit" value="保 存" /></span></div><span href="javascript:;">标题标题标题标题标题</a><div /><input type="submit" value="保 存" /></span></div><span href="javascript:;">标题标题标题标题标题</a><div /><input type="submit" value="保 存" /></span></div><span href="javascript:;">标题标题标题标题标题</a><div /><input type="submit" value="保 存" /></span></div><span href="javascript:;">标题标题标题标题标题</a><div /><input type="submit" value="保 存" /></span></div><span href="javascript:;">标题标题标题标题标题</a><div /><input type="submit" value="保 存" /></span></div><span href="javascript:;">标题标题标题标题标题</a><div /><input type="submit" value="保 存" /></span></div><span href="javascript:;">标题标题标题标题标题</a><div /><input type="submit" value="保 存" /></span></div><span href="javascript:;">标题标题标题标题标题</a><div /><input type="submit" value="保 存" /></span></div><span href="javascript:;">标题标题标题标题标题</a><div /><input type="submit" value="保 存" /></span></div><span href="javascript:;">标题标题标题标题标题</a><div /><input type="submit" value="保 存" /></span></div><span href="javascript:;">标题标题标题标题标题</a><div /><input type="submit" value="保 存" /></span></div><span /><input type="submit" value="保 存" /></span></div></div></div></div></div></div></div><!-- mask --><div id="mask"> <div style="width: 400px;text-align:center; margin:auto;margin-top:400px; " align="absmiddle"> <img src="${pageContext.request.contextPath}/images/loading.gif" border="0"> </div></div></html></body></html>?
?
/** * @author LiuQing * @version 1.0 * @date 2014-1-20 16:35 * 多数据加载测试 * 使用案例 * function loadDataTest() { * var data = new Array(); * var i = 0; * //ComboObj * data[++i] = new ComboObj("刘庆",1001); * data[++i] = new ComboObj("项目管理",1002); * data[++i] = new ComboObj("流程管理",1003); * runyi_Combobox.reloadData("roleType",data); * } *<input type="text" name="rolename" value="${roleInfoVo.title}" /> *<input type="button" onclick="javascript:runyi_Combobox.addOptiton('roleType','liuqing','12');" value="add" /> *<input type="button" onclick="javascript:runyi_Combobox.clear('roleType')" value="clear"/> *<input type="button" onclick="javascript:loadDataTest()" value="loadDataTest"/> *<input type="button" onclick="javascript:runyi_Combobox.setSelectOption('roleType',1002)" value="selectOption"/> *//** * 扩展 定义定位方法 * **/ Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1; }; /** * * 扩展 删除数据 * * **/ Array.prototype.remove = function(val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } };/** * Constructor */function runyi_Combobox() {};/** * @param text 显示文本 * @param value 显示值 * Constructor */function ComboObj(text,value) {this.text = text;this.value = value;};//Combobox数据存储容器var comboboxStore = new Array();//项目编号var index = 0;/** * * 组件值对象 * Combobox值对名胜 * formObjId hidden 用户表单提交值对象ID * value <option value="">所选择对象的值 * text <option>text</option> 所选择对象显示内容 * itemId 所选项目id * */function ComboxVoObj(formObjId,name,value,text,itemId) {this.formObjId = formObjId;this.name = name;this.value = value;this.text = text;this.itemId = itemId;}; /** * 初始化数据 */function comboboxInitData() {var combobox_zk = "combobox_zk";//解析页面中存在的数据select 数据$("." + combobox_zk).each(function(){//隐式存值input 对象Idvar hidId = $(this).attr("name") + "_hidden";var name = $(this).attr("name");//加载页面初始数据并存入Combobox容器中$(this).find("option").each(function(){var comboxVoObj = new ComboxVoObj(hidId,name,$(this).val(),$(this).text(),"combox_item_" + (index + 1));comboboxStore[index++] = comboxVoObj;});$(this).after("<dd class="cr_role_t cr_select_box">" + "<div class="select_box">" + "<input type="hidden" class="select_value" name="" + name + "" id="" + hidId + "" value="" />" + "<span class="select_txt" id="" + name + "_show_input"></span>" + "<a class="select_open icon16 gray_arrow_b"></a>" + "<div class="select_option" id="" + name + "_show_bar">" + "</div>" + "</div>" + "</dd>");//添加显示层级var layout_z_index = 1000;$(".cr_select_box").each(function(){$(this).css({"z-index":--layout_z_index});});//显示对应的combobox[区域]var select_combox = $("#" + name + "_show_bar");//清空显示区域内容$(select_combox).empty();for (var i = 0; i < comboboxStore.length; i++) {//判断是否为对应组件if (name+"_hidden" == comboboxStore[i].formObjId) {select_combox.append("<a class="select_item" id="" + comboboxStore[i].itemId + "" style="height:20px;">" + comboboxStore[i].text + "</a>");}}var showText = $(this).find("option:selected").text();$("#" + name + "_show_input").text(showText);$("#" + name + "_hidden").val($(this).val());try {$(this).attr("name",name + "_hidden"); $(this).removeAttr("name");}catch(e){}});comboboxInitEvent();//对显示项添加鼠标移动事件 $(".select_item").each(function(){$(this).hover( function(){ $(this).addClass("item_selected");},function(){ $(this).removeClass("item_selected");});});};/** * 组件事件添加 */function comboboxInitEvent() {//添加显示项点击事件$(".select_item").click(function(){var item = $(this);for (var i = 0; i < comboboxStore.length; i++) {var id = $(item).attr("id");var storeItem = comboboxStore[i];//判断当前ID是否与存储内容相等if (id == storeItem.itemId) {$("#" + storeItem.id).val(storeItem.value);//显示选择输出值 $("#" + storeItem.name + "_show_input").text(storeItem.text);$("#" + storeItem.name + "_hidden").val(storeItem.value);}}});$(".select_box").click(function(){var select_option = $(this).find(".select_option");if ($(select_option).is(":hidden")) {$(select_option).show();}else {$(select_option).hide();}});}; /** * * * 启动加载 * **/ $(document).ready(function(){comboboxInitData(); }); /** * 添加选择项Event */ runyi_Combobox.addItemEvent = function addSelectItemEvent() { $(".select_item").click(function(){var item = $(this);for (var i = 0; i < comboboxStore.length; i++) {var id = $(item).attr("id");var storeItem = comboboxStore[i];//判断当前ID是否与存储内容相等if (id == storeItem.itemId) {$("#" + storeItem.id).val(storeItem.value);//显示选择输出值 $("#" + storeItem.name + "_show_input").text(storeItem.text);$("#" + storeItem.name + "_hidden").val(storeItem.value);}}}); }; /** * 添加(name[select name],text[<option> text</option>],value[<option value="">]) * @param name selectedComponentName * @param text option Text option显示内容 * @param value option value对应的值 **/ runyi_Combobox.addOptiton = function(name,text,value) { var hidId = name + "_hidden"; var comboxVoObj = new ComboxVoObj(hidId,name,value,text,"combox_item_" + (index + 1)); var i = index++; comboboxStore[i] = comboxVoObj; $("#" + name + "_show_bar").append("<a class="select_item" id="" + comboboxStore[i].itemId + "" style="height:20px;">" + comboboxStore[i].text + "</a>"); runyi_Combobox.addItemEvent(); }; /** * 从新加载数据 * @param name selectComponent组件 * @param arraydata 数组[new ComboObj(text,value),new ComboObj{text,value}] * */ runyi_Combobox.reloadData = function(name,arraydata) { runyi_Combobox.clear(name); for (var i = 0; i < arraydata.length; i++) { var comboObj = arraydata[i]; if (comboObj instanceof ComboObj) { runyi_Combobox.addOptiton(name,comboObj.text,comboObj.value); } } }; /** * * @param name select组件name * @param value option映射值 * 删除指定项 name 和key * * **/ runyi_Combobox.removeOption = function(name,value) { $("#" + name + "_show_bar").find(".select_item").each(function(){ var select_item = $(this); var id = $(this).attr("id"); for (var i = 0; i < comboboxStore.length; i++) { if (comboboxStore[i].name == name && comboboxStore[i].itemId == id ) { comboboxStore.remove(i); $(select_item).remove(); break; } } }); }; /** * * @param name String * 清空对应域数据 * **/ runyi_Combobox.clear = function(name) { for (var i = 0; i < comboboxStore.length; i++) { if (comboboxStore[i].name == name) { comboboxStore.remove(i); //删除指定元素 $("#" + comboboxStore[i].itemId).remove(); $("#" + comboboxStore[i].name + "_show_input").text(""); } } }; /** * @param name String selectComponetName * @param value optionValue * 设置显示的值 * **/ runyi_Combobox.setSelectOption = function(name,value) { for (var i = 0; i < comboboxStore.length; i++) { var selected = comboboxStore[i]; if (selected.name == name && selected.value == value) { $("#" + selected.formObjId).val(selected.value); $("#" + selected.name + "_show_input").text(selected.text); } } }; ?
?
?
?
?