客户端用JS实现TreeView控件父子节点联选
来源:互联网 发布:汉字拉丁化 知乎 编辑:程序博客网 时间:2024/05/29 02:04
说明
TreeView控件应该说是比较常用的一个东东了.别人提供的JSTree实现(如Yahoo UI lIb) 都有这样或那样的问题而微软的TreeView控件虽然用起来方便,可是一直感觉也不是很理想.比如,无实通过属性设定为是否父子节点联选(既,选中父节点就选中所有子节点或孙节点,反之,全部取消选择了子节点父节点也要被取消选择).以前1.1的时候,可以用更改HtC的方法搞定.2.0下,JS是编在DLL里的,所以只能自己通过客户端JS搞定.
解决思路
先说一下TreeView在IE中实现的结构,
<Div TreeViewID>
<CheckBox id = TreeViewID + n + 节点次序/>
<span id=TreeViewID + t + 节点次序">节点的Text</span>
--如果有子节点
<Div ID = TreeViewID + n + 节点次序 + Nodes>
同样的次序
</Div>
</Div>
有了这个就好办了,先拦下TreeView的OnClick事件,判断事件源是不是CheckBox,如果是,就按这个次序寻根认祖, 再取设定子节点的状态, 如果是取消选定,还要判断一下是不是所有兄弟结点都被取消选定了,如果是这样,那也要取消父节点.
后台拦下TreeView的OnClick事件很简单
前台JS不多解释了,思路有了,看代码吧
function setParentState(objNode)
{
var objParentDiv = WebForm_GetParentByTagName(objNode,"div");
if(objParentDiv == null || objParentDiv == "undefined")
return;
var divID = objParentDiv.getAttribute("ID");
var prefix = divID.substring(0,divID.indexOf("Nodes"));
var parentID = prefix + "CheckBox";
var parentChk = document.getElementById(parentID);
if(parentChk == null || parentChk == "undefined")
return;
if (objNode.checked)
{
parentChk.checked = true;
}
else
{
if (isAllChildrenUnChecked(parentChk))
{
parentChk.checked = false;
}
}
setParentState(parentChk);
}
function setChildState(objNode)//设定子控件状态
{
var nodeID = objNode.getAttribute("ID"); //chkBox ID
var prefix = nodeID.substring(0,nodeID.indexOf("CheckBox")); //节点的前缀
var childrenDiv = document.getElementById(prefix + "Nodes");
if(childrenDiv == null || childrenDiv == "undefined")
return ;
var childrenArray = childrenDiv.children; //取得所有子控件
for(var i = 0;i< childrenArray.length;i++)
{
var container = childrenArray[i]; //子控件的容器
var chk = WebForm_GetElementByTagName(container,"input"); //查找Check控件,由于只有一个种Input控件,就是CheckBox
chk.checked = objNode.checked;
setChildState(chk);
}
}
function isAllChildrenUnChecked(objChk)
{
var objChkID = objChk.getAttribute("ID");
var prefix = objChkID.substring(0,objChkID.indexOf("CheckBox")); //节点的前缀
var childrenDiv = document.getElementById(prefix + "Nodes");
if(childrenDiv == null || childrenDiv == "undefined")
return ;
var childrenArray = childrenDiv.children; //取得所有子控件
for(var i = 0;i< childrenArray.length;i++)
{
var container = childrenArray[i]; //子控件的容器
var chk = WebForm_GetElementByTagName(container,"input"); //查找Check控件,由于只有一个种Input控件,就是CheckBox
if (chk.checked)
return false;
}
return true;
}
//触发事件
function HandleCheckEvent()
{
var objNode = event.srcElement;
if(objNode.tagName !="INPUT" || objNode.type!="checkbox")
return;
//设定子Chk状态
setChildState(objNode);
//设定父Chk状态
setParentState(objNode);
}
</script>
- 客户端用JS实现TreeView控件父子节点联选
- TreeView控件的CheckBox自动实现父子节点递归选定
- javascript 操作treeview 实现父子节点连选
- 实现TreeView父子节点的联动
- treeview 父子节点联动
- TreeView 控件客户端节点选择的代码
- ASP.NET TreeView 用JS实现节点的单选功能
- js获取父子节点
- js-父子节点
- ASP.NET 2.0 TreeView 树状控件-父子节点选择javascript脚本
- 定制TreeView控件,实现节点样式自定义及节点级别的单选、复选
- TreeView控件实现选中父节点时全选子节点
- TreeView控件实现选中父节点时全选子节点
- TreeView控件实现选中父节点时全选子节点
- VB.NET实现 TreeView控件查找节点,显示节点
- TreeView控件节点遍历
- TreeView控件的父节点的全选与不选级联子节点并实现拖动子节点
- treeview客户端节点互斥
- 留下真情从头说—穿越白羊峪长城(五)
- 留下真情从头说—穿越白羊峪长城(六)
- ASP.NET文件下载函数使用浅析
- C++与Flex之间socket通信policy-file-request解决方案
- javascript子页面刷新父页面
- 客户端用JS实现TreeView控件父子节点联选
- hello
- Google个性化搜索对网站SEO的影响
- 留下真情从头说—穿越白羊峪长城(七)
- 机房标签
- PHP中计算某指定的一天是星期几
- 留下真情从头说—穿越白羊峪长城(八)
- 读书笔记(三):【SQL Server 2005 Performance Tuning性能调校】(0):【开篇】
- 休问情怀谁得似——冰雪小五台苦旅记(一)