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> | <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> > </li>
<li><a href="javascript:;">机构管理</a></li>
<li> > </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>状　　态：</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>授　　权：</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>备　　注：</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);
}
}
};