多选下拉框 DropDownCheckBoxList 控件
2011-10-10 17:18
375 查看
最近弄完个项目、项目需要支持多选功能、找了很多例子没找到合适的,最后自己开发了个控件:
DropDownCheckBoxList 控件继承 DropDownList ;
整个控件由四部分组成:一个文本框、两个图标(向下|向上)、一个隐藏的 DIV 、两个隐藏域。控件示意图
收缩状态:
selectDefaultItem
控件支持主流浏览器 IE 7+,FF3.5+,Chrome 9+,Safari 5 等浏览器。但在 IE6中与 与浏览器自身的 select 冲突。
控件源码
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 冲突。
控件源码
相关文章推荐
- ASP.net 服务器控件: DropDownCheckBoxList 下拉多选框
- 20151224:Web:CheckBoxList 控件:去重显示 ;复选框多选时可点击查询查出结果
- 用JavaScript获取Asp.net服务器端控件CheckBoxList的选中值数组
- Datalist中定位到所操作控件的那一条数据、遍历整个DataList,遍历CheckBoxList 控件
- silverlight自定义用户控件,实现下拉多选功能
- TreeList 树形控件 实现带三种状态的CheckBox
- CheckBoxList多选样式jquery、C#获取选择项
- [导入]在服务器端得到CheckBoxList控件最后选择项的方法
- angularjs 多选下拉框 控件angularjs ui-select2
- Silverlight中实现带CheckBox的多选下拉框--来源(附有实例代码):http://www.cnblogs.com/shiaupo/archive/2011/06/04/2072668.html
- 复选空件和复选组控件(CheckBox和CheckBoxList)
- CheckBoxList控件
- CheckBoxList 控件ListItem项 添加ToolTip属性(鼠标放在上面时,有提示)
- CheckBoxList控件用法实现投票实例
- 可搜索、可多选的下拉列表控件使用
- ASP.NET - CheckBox 和 CheckBoxList Web 服务器控件概述(上)
- 用JavaScript获取Asp.net服务器端控件CheckBoxList的选中值数组
- 限制CheckBoxList控件只能单选
- altas(ajax)控件(十四):为下拉控件添加快捷键查找功能的ListSearchExtender
- MVC应用程序与多选列表(checkbox list)