`

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 对象Id
		var 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 class="warp">
			<p>您正在使用 Internet Explorer 6 低版本的IE浏览器。为更好的浏览本页，建议您将浏览器升级到<a href="http://www.microsoft.com/china/windows/internet-explorer/ie8howto.aspx" 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 class="close_warning" id="close_warning" href="javascript:;"></a>
	</div>
<![endif]--> 
<!--header-->
	<div class="header">
		<div class="head_top">
			<div class="warp clear">
				<h1 class="logo"><a href="#" title="润颐科技">润颐科技</a></h1>
				<div class="account_area">
					<a class="account_user" href="javascript">admin</a><a href="#">[退出]</a>&nbsp;|&nbsp;<a href="#">帮助中心</a>
				</div>
			</div>
		</div>
		<div class="nav" id="fixedMenu" >
			<ul class="warp clear" 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 class="active"><a href="account.html">账户管理</a></li>
			</ul>
		</div>
	</div>
<!-- end header -->
	<div class="line_h15"></div>
<!-- ai_content -->
	<div class="mc2_box warp">
		<div class="mc2_content">
			<div class="mc2_con_hd">
				<ul class="mc2_con_hd_nav" class="clear">
					<li><a href="javascript:;">账户管理</a></li>
					<li>&nbsp;>&nbsp;</li>
					<li><a href="javascript:;">机构管理</a></li>
					<li>&nbsp;>&nbsp;</li>
					<li><a href="javascript:;">总部资料</a></li>
				</ul>
			</div>
			<div class="mc2_con_bd clear">
				<div class="mc2_con_aside">
					<ul class="mc2_aside_menu">
						<li class="mc2_return">
							<a href="${pageContext.request.contextPath}/esm/user_manager/role/list.htm"><i class="icon16 white_return"></i>返回</a>
						</li>
						<li class="mc2_active">
							<h3 class="mc2_no_submenu ">
								<a href="#"><i class="icon16"></i>账户资料</a>
							</h3>
						</li>
						<li>
							<h3>
								<a href="#"><i class="icon16"></i>机构组织</a>
							</h3>
						</li>
						<li>
							<h3>
								<a href="#"><i class="icon16"></i>用户管理</a>
							</h3>
							<ul class="mc2_aside_submenu">
								<li class="mc2_submenu_cur"><a href="#">角色管理</a></li>
								<li><a href="#">用户管理</a></li>
							</ul>
						</li>
						<li >
							<h3>
								<a href="#"><i class="icon16"></i>资金账户</a>
							</h3>
						</li>
					</ul>
				</div>
				<form id="form" name="form" action="${pageContext.request.contextPath}/esm/user_manager/role/update.htm" method="post">
				<div class="mc2_con_main">
					<div class="mc2_main_a ai_main_floor">
						<div class="mc2_main_hd ">
							<h3><a href="#">角色管理<input type="hidden" class="text" name="roleid" value="${roleInfoVo.id }" /></a></h3>
							<i class="icon16"></i>
						</div>
						<div class="mc2_main_bd">
							<dl class="ai_item clear">
								<dt>角色名称：</dt>
								<dd class="cr_input">
									<input type="text" name="rolename" value="${roleInfoVo.title}" class="text" />
									<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 class="ai_item clear">
								<dt>角色类型：</dt>
								<select class="combobox_zk" 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 class="cr_create_class">
									<div class="cr_create_btn">
										<a href="javascript:;">创建分类</a>
										<a href="javascript:;">分类管理</a>
									</div>
									<div class="cr_create_i clear">
										<input type="text" class="text" />
										<input type="submit" class="submit" value="确 定" />
									</div>
								</dd>
							</dl>
							<dl class="ai_item clear">
								<dt>状&#12288;&#12288;态：</dt>
								<select class="combobox_zk" name="roleStatus" style="display:none;">
									<option value="1">激活</option>
									<option value="2">禁用</option>
								</select>
							</dl>
							<dl class="ai_item clear">
								<dt>授&#12288;&#12288;权：</dt>
								<dd class="cr_power">
									<div class="cr_power_box">
										<table cellpadding="0"  cellspacing="0" class="cr_power_table">
											<tbody>
											<c:forEach items="${permissionTypes}" var="perType">
												<tr>
													<td class="cr_power_parent">
														<label>
															<input type="checkbox" value="${perType.id}" <c:if test="${perType.selectedValueState == 1 }"> checked="checked" </c:if> onclick="permissType(this)" name="allowPermisson" class="checkbox" />
															<span>${perType.titlecn}</span>
														</label>
													</td>
													<td class="cr_power_child"  id="item_${perType.id}">
														<ul class="cr_child_list clear">
														    <c:forEach items="${perType.subs}" var="perSub">
															<li>
																<label>
																	<input type="checkbox" name="allowPermisson" <c:if test="${perSub.selectedValueState == 1 }"> checked="checked" </c:if> value="${perSub.id}" class="checkbox" />
																	<span>${perSub.titlecn}</span>
																</label>
															</li>
														    </c:forEach>
														</ul>
													</td>
												</tr>
											</c:forEach>
											</tbody>
										</table>
									</div>
								</dd>
							</dl>
							<dl class="ai_item clear">
								<dt>备&#12288;&#12288;注：</dt>
								<dd class="cr_mark">
									<textarea type="text" name="remark" class="text">${roleInfoVo.description}</textarea>
								</dd>
							</dl>
						</div>
						<div class="cr_function_bar">
							<a class="mc2_btn mc2_btn_cancel mr80" href="javascript:;">取消</a>
							<a class="mc2_btn mc2_btn_save " onclick="submitForm('form')" href="javascript:;">保存</a>
						</div>
					</div>
				</div>
				</form>
			</div>
		</div>
	</div>
<!-- end a_content -->
	<div class="line_h36"></div>
<!-- footer -->
	<div class="footer">
		<div class="warp foot_c clear">
			<ul class="links">
				<li class="links_item no_extra">
					<a href="#">关于润颐</a>
				</li>
				<li class="links_item">
					<a href="#">服务协力</a>
				</li>
				<li class="links_item">
					<a href="#">客服中心</a>
				</li>
				<li class="links_item">
					<a href="#">联系邮箱</a>
				</li>
				<li class="links_item">
					<a href="#">侵权投诉</a>
				</li>
			</ul>
			<p class="copyright">Copyright © 2012-2013 Tencent. All Rights Reserved.</p>
		</div>
	</div>
<!-- end footer -->
<!-- 分类管理弹出框 -->
	<div class="dialog_box cr_dialog_class" >
		<div class="dialog">
			<div class="dialog_hd">
				<h3>上传文件</h3>
				<a href="javascript:;" class="closed">关闭</a>
			</div>
			<div class="qr_dialog_con clear">
				<div class="qr_dialog_main rm_dialog_main">
					<div class="qr_inner_bd">
						<ul class="qr_inner_list rm_inner_list" >
							<li>
								<a class="qr_inner_n" href="javascript:;">标题标题标题标题标题</a>
								<div class="qr_inner_i">
									<span class="qr_i_box clear">
										<input type="text" class="text" />
										<input type="submit" class="submit" value="保 存" />
									</span>
								</div>
								<span class="qr_inner_ctr">
									<i class="icon16 gray_edit0 mr10"></i>
									<i class="icon16 gray_del0"></i>
								</span>
							</li>
							<li>
								<a class="qr_inner_n" href="javascript:;">标题标题标题标题标题</a>
								<div class="qr_inner_i">
									<span class="qr_i_box clear">
										<input type="text" class="text" />
										<input type="submit" class="submit" value="保 存" />
									</span>
								</div>
								<span class="qr_inner_ctr">
									<i class="icon16 gray_edit0 mr10"></i>
									<i class="icon16 gray_del0"></i>
								</span>
							</li>
							<li>
								<a class="qr_inner_n" href="javascript:;">标题标题标题标题标题</a>
								<div class="qr_inner_i">
									<span class="qr_i_box clear">
										<input type="text" class="text" />
										<input type="submit" class="submit" value="保 存" />
									</span>
								</div>
								<span class="qr_inner_ctr">
									<i class="icon16 gray_edit0 mr10"></i>
									<i class="icon16 gray_del0"></i>
								</span>
							</li>
							<li>
								<a class="qr_inner_n" href="javascript:;">标题标题标题标题标题</a>
								<div class="qr_inner_i">
									<span class="qr_i_box clear">
										<input type="text" class="text" />
										<input type="submit" class="submit" value="保 存" />
									</span>
								</div>
								<span class="qr_inner_ctr">
									<i class="icon16 gray_edit0 mr10"></i>
									<i class="icon16 gray_del0"></i>
								</span>
							</li>
							<li>
								<a class="qr_inner_n" href="javascript:;">标题标题标题标题标题</a>
								<div class="qr_inner_i">
									<span class="qr_i_box clear">
										<input type="text" class="text" />
										<input type="submit" class="submit" value="保 存" />
									</span>
								</div>
								<span class="qr_inner_ctr">
									<i class="icon16 gray_edit0 mr10"></i>
									<i class="icon16 gray_del0"></i>
								</span>
							</li>
							<li>
								<a class="qr_inner_n" href="javascript:;">标题标题标题标题标题</a>
								<div class="qr_inner_i">
									<span class="qr_i_box clear">
										<input type="text" class="text" />
										<input type="submit" class="submit" value="保 存" />
									</span>
								</div>
								<span class="qr_inner_ctr">
									<i class="icon16 gray_edit0 mr10"></i>
									<i class="icon16 gray_del0"></i>
								</span>
							</li>
							<li>
								<a class="qr_inner_n" href="javascript:;">标题标题标题标题标题</a>
								<div class="qr_inner_i">
									<span class="qr_i_box clear">
										<input type="text" class="text" />
										<input type="submit" class="submit" value="保 存" />
									</span>
								</div>
								<span class="qr_inner_ctr">
									<i class="icon16 gray_edit0 mr10"></i>
									<i class="icon16 gray_del0"></i>
								</span>
							</li>
							<li>
								<a class="qr_inner_n" href="javascript:;">标题标题标题标题标题</a>
								<div class="qr_inner_i">
									<span class="qr_i_box clear">
										<input type="text" class="text" />
										<input type="submit" class="submit" value="保 存" />
									</span>
								</div>
								<span class="qr_inner_ctr">
									<i class="icon16 gray_edit0 mr10"></i>
									<i class="icon16 gray_del0"></i>
								</span>
							</li>
							<li>
								<a class="qr_inner_n" href="javascript:;">标题标题标题标题标题</a>
								<div class="qr_inner_i">
									<span class="qr_i_box clear">
										<input type="text" class="text" />
										<input type="submit" class="submit" value="保 存" />
									</span>
								</div>
								<span class="qr_inner_ctr">
									<i class="icon16 gray_edit0 mr10"></i>
									<i class="icon16 gray_del0"></i>
								</span>
							</li>
							<li>
								<a class="qr_inner_n" href="javascript:;">标题标题标题标题标题</a>
								<div class="qr_inner_i">
									<span class="qr_i_box clear">
										<input type="text" class="text" />
										<input type="submit" class="submit" value="保 存" />
									</span>
								</div>
								<span class="qr_inner_ctr">
									<i class="icon16 gray_edit0 mr10"></i>
									<i class="icon16 gray_del0"></i>
								</span>
							</li>
							<li>
								<a class="qr_inner_n" href="javascript:;">标题标题标题标题标题</a>
								<div class="qr_inner_i">
									<span class="qr_i_box clear">
										<input type="text" class="text" />
										<input type="submit" class="submit" value="保 存" />
									</span>
								</div>
								<span class="qr_inner_ctr">
									<i class="icon16 gray_edit0 mr10"></i>
									<i class="icon16 gray_del0"></i>
								</span>
							</li>
							<li>
								<a class="qr_inner_n" href="javascript:;">标题标题标题标题标题</a>
								<div class="qr_inner_i">
									<span class="qr_i_box clear">
										<input type="text" class="text" />
										<input type="submit" class="submit" value="保 存" />
									</span>
								</div>
								<span class="qr_inner_ctr">
									<i class="icon16 gray_edit0 mr10"></i>
									<i class="icon16 gray_del0"></i>
								</span>
							</li>
						</ul>
					</div>
					<div class="qr_inner_ft">
						<div class="qr_ft_add clear">
							<a href="javascript:;"><i class="icon16 gray_add0"></i><em>新增</em></a>
							<div class="qr_inner_i">
								<span class="qr_i_box clear">
									<input type="text" class="text" />
									<input type="submit" class="submit" value="保 存" />
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<!-- mask -->
	<div class="mask" 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}" class="text" />
  *<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 对象Id
		var 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);
		 }
	 }
 };

 

 

 

 

 

分享到：
| ComboBox简单开发
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    buuton-combo.rar_进程与线程

    "buuton-combo.rar_进程与线程"这个压缩包文件似乎包含了一系列关于如何在编程中利用这些概念的示例代码和资源。下面将详细阐述这两个概念以及它们在实际编程中的应用。 首先，进程是操作系统分配资源的基本单位，...

    MFC通用控件的实现，该例综合实现了MFC控件的实现，了解掌握MFC控件

    控件通常继承自CWnd或其派生类，例如CButton、CEdit、CStatic等，这些类为特定类型的Windows控件提供了封装。通过这些类，开发者可以直接调用成员函数来改变控件的状态，如设置文本、大小、位置等，或者响应用户的...

    MFC多个组合框动态生成相同数据项实例

    CComboBox是MFC对Windows API中COMBOBOX控件的封装，提供了面向对象的方法来操作组合框。通过CComboBox类，我们可以方便地添加、删除和查询组合框的项目。 2. **动态生成数据项**： 动态生成数据项意味着在运行时...

    Visual_C++MFC入门教程

    - List Box/Check List Box、Combo Box/Combo Box Ex、Tree Ctrl、List Ctrl、Tab Ctrl：分别解释了列表框、组合框、树控件、列表控件和标签控件的用法。 - Tool Bar、Status Bar、Dialog Bar：介绍了工具栏、状态栏...

    VB6.0实现自动检测可用的串口

    这个过程可以封装成一个函数或子程序，方便在其他地方调用。在实际应用中，你可能还需要处理打开串口时可能出现的错误，以及根据需要调整串口设置。 在提供的压缩包文件中，"VB串口检测"和"串口"可能包含了完整的VB...

    Web应用前端技术的探索与实践

    6.5.2.3 封装Accordion和Tab为Switchable 65 6.5.2.3.1 使用JQuery Tools构建 67 6.5.2.3.2 JQuery Tools的Switchable对Ajax的支持 68 6.5.2.3.3 使用JQuery Switchable 70 6.5.2.3.4 使用kissy Switchable 78 6.5....

    Visual C++ 数据库系统开发完全手册.part2

    7.6.8 组合框控件（Combo Box） 7.6.9 树视图控件（Tree Control） 7.6.10 列表视图控件（List Control） 7.6.11 标签控件（Tab Control） 7.7 ActiveX控件 7.8 制作ActiveX控件 7.8.1 制作ActiveX控件的方法 7.8.2 ...

    Visual C++ 数据库系统开发完全手册.part1

    7.6.8 组合框控件（Combo Box） 7.6.9 树视图控件（Tree Control） 7.6.10 列表视图控件（List Control） 7.6.11 标签控件（Tab Control） 7.7 ActiveX控件 7.8 制作ActiveX控件 7.8.1 制作ActiveX控件的方法 7.8.2 ...

    VS2019 MFC 串口通信.zip

    MFC是微软提供的一套C++类库，用于简化Windows应用程序开发，它包含了对Windows API的封装，使开发者能够更加高效地构建用户界面和系统功能。 串口通信是一种通过串行端口进行数据传输的技术，广泛应用于各种硬件...

    PyGTK 2.0 Tutorial

    - **PyGTK简介**：PyGTK是Python语言对GTK+图形用户界面库的封装，允许开发者使用Python来创建GTK+应用程序。GTK+（GIMP工具包）是一种用于构建跨平台GUI的应用程序编程接口(API)，它主要由C语言编写，但采用了面向...

    GoodProject Maven Webapp.zip

    jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合，包括功能强大的 datagrid(数据网格)、treegrid(树形表格)、 panel(面板)、combo(下拉组合)等等。 用户可以组合使用这些组件，也可以单独使用其中一个。 ...

    C++MFC教程

    |------ 4.6 Combo Box/Combo Box Ex |------ 4.7 Tree Ctrl |------ 4.8 List Ctrl |------ 4.9 Tab Ctrl |------ 4.A Tool Bar |------ 4.B Status Bar |------ 4.C Dialog Bar |------ 4.D 利用AppWizard创建并...

    vc++ 应用源码包_1

    这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用，只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试！ GMem 内存管理单元源码。GMem.cpp和GMem.h是内存管理...

    vc++ 应用源码包_2

    这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用，只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试！ GMem 内存管理单元源码。GMem.cpp和GMem.h是内存管理...

    vc++ 应用源码包_6

    这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用，只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试！ GMem 内存管理单元源码。GMem.cpp和GMem.h是内存管理...

    vc++ 应用源码包_5

    这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用，只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试！ GMem 内存管理单元源码。GMem.cpp和GMem.h是内存管理...

    vc++ 应用源码包_3

    这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用，只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试！ GMem 内存管理单元源码。GMem.cpp和GMem.h是内存管理...

    vc++ 开发实例源码包

    这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用，只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试！ 如题。详细见源码。 GMem 内存管理单元源码。GMem.cpp...

Magicbox
Global site tag (gtag.js) - Google Analytics