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);
}
}
};
相关推荐
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....
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 ...
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 ...
jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合，包括功能强大的 datagrid(数据网格)、treegrid(树形表格)、 panel(面板)、combo(下拉组合)等等。 用户可以组合使用这些组件，也可以单独使用其中一个。 ...
|------ 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创建并...
这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用，只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试！ GMem 内存管理单元源码。GMem.cpp和GMem.h是内存管理...
这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用，只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试！ GMem 内存管理单元源码。GMem.cpp和GMem.h是内存管理...
这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用，只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试！ GMem 内存管理单元源码。GMem.cpp和GMem.h是内存管理...
这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用，只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试！ GMem 内存管理单元源码。GMem.cpp和GMem.h是内存管理...
这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用，只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试！ GMem 内存管理单元源码。GMem.cpp和GMem.h是内存管理...
这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用，只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试！ 如题。详细见源码。 GMem 内存管理单元源码。GMem.cpp...