说明
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事件很简单
TreeViewID.Attributes.Add(
"
onclick
"
,
"
HandleCheckEvent()
"
);
前台JS不多解释了,思路有了,看代码吧
<
script
>
function
setParentState(objNode)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
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;
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (objNode.checked)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
parentChk.checked = true;
}
else
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if (isAllChildrenUnChecked(parentChk))
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
parentChk.checked = false;
}
}
setParentState(parentChk);
}
function
setChildState(objNode)
//
设定子控件状态
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
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; //取得所有子控件
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
for(var i = 0;i< childrenArray.length;i++)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var container = childrenArray[i]; //子控件的容器
var chk = WebForm_GetElementByTagName(container,"input"); //查找Check控件,由于只有一个种Input控件,就是CheckBox
chk.checked = objNode.checked;
setChildState(chk);
}
}
function
isAllChildrenUnChecked(objChk)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
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++)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var container = childrenArray[i]; //子控件的容器
var chk = WebForm_GetElementByTagName(container,"input"); //查找Check控件,由于只有一个种Input控件,就是CheckBox
if (chk.checked)
return false;
}
return true;
}
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//
触发事件
function
HandleCheckEvent()
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var objNode = event.srcElement;
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if(objNode.tagName !="INPUT" || objNode.type!="checkbox")
return;
//设定子Chk状态
setChildState(objNode);
//设定父Chk状态
setParentState(objNode);
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</
script
>