您的位置:首页 > 运维架构

多选下拉框 DropDownCheckBoxList 控件

2011-10-10 17:18 375 查看
最近弄完个项目、项目需要支持多选功能、找了很多例子没找到合适的,最后自己开发了个控件:

DropDownCheckBoxList 控件继承 DropDownList ;

整个控件由四部分组成:一个文本框、两个图标(向下|向上)、一个隐藏的 DIV 、两个隐藏域。控件示意图

收缩状态:

selectDefaultItem

function selectDefaultItem(hfValueId, prefix) {
$hfValueObj = $("#" + hfValueId);
if (!$hfValueObj.val())
{ return; }
var arr = $hfValueObj.val().split(splitor);
if (!arr)
{ return; }
vItems.initItem();
tItems.initItem();
vtItems.initItem();
var subNodes;
var firstNode;
var lastNode;
var nodeValue;
var nodeText;
var $tdNodes;
$divObj = $("#" + prefix + "_div");
var $tableNodes = $divObj.children('table');
var tableId = $tableNodes.get(0).id;
$("#" + tableId + " tr").each(function () {
$tdNodes = $(this).children('td');
$tdNodes.each(function () {
subNodes = this;
firstNode = subNodes.children[0];
lastNode = subNodes.children[1];
nodeValue = firstNode.value;
if (nodeValue) {
if (lastNode.innerText)
{ nodeText = lastNode.innerText; }
else
{ nodeText = lastNode.textContent; }
if (arr.hasItem(nodeValue)) {
if (!vItems.hasItem(nodeValue))
{ vItems.addItem(nodeValue); }
if (!tItems.hasItem(nodeText))
{ tItems.addItem(nodeText); }
if (!vtItems.hasItem(nodeValue + "|" + nodeText))
{ vtItems.addItem(nodeValue + "|" + nodeText); }
if (!tItems.hasItem(nodeText))
{ tItems.addItem(nodeText); }
if (!vtItems.hasItem(nodeValue + "|" + nodeText))
{ vtItems.addItem(nodeValue + "|" + nodeText); }
firstNode.checked = true;
}
}
});
});

$txtObj.val(tItems.joinItem(splitor));
$hfTextObj.val(vtItems.joinItem(splitor));
$hfValueObj.val(vItems.joinItem(splitor));
}


控件支持主流浏览器 IE 7+,FF3.5+,Chrome 9+,Safari 5 等浏览器。但在 IE6中与 与浏览器自身的 select 冲突。

控件源码
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: