用客户端JS实现微软TreeView控件父子节点联选!

说明

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)

function setChildState(objNode)//设定子控件状态

function isAllChildrenUnChecked(objChk)

//触发事件

function HandleCheckEvent()

</script>