TreeView控件如何实现选中父节点时全选子节点

yxwf2008 2008-01-06 09:14:09

就是在TreeView控件中给每个节点前面加一个CheckBox，设置showCheckbox为True，想实现选择父节点的复选框的时候，同时把该节点下的所有子节点的复选框都选中，取消父节点复选框选中状态时，子节点的选中状态也被取消，谢谢各位达人了

...全文

1808 34 打赏收藏转发到动态举报

写回复

用AI写文章

34 条回复

切换为时间正序

请发表友善的回复…

发表回复

fyg2551 2012-08-01

打赏
举报

学习学习了！

lwlj2007 2011-11-11

打赏
举报

请问大侠们，VC怎么调js代码啊。。。急急急

nijjin33 2010-07-08

打赏
举报

确实有用

guyan033 2008-07-23

打赏
举报

呵呵，看来楼主的正解了，

wwd252 2008-07-23

打赏
举报



TreeView2.js



/***************************************************************************************

Name: Client Javascript for ASP.NET 2.0 TreeView 

Description: ASP.NET 2.0 TreeView lack for client operation. This set of functions provide

    some supports. Includes:

    * get node

    * change checkbox status of parent and child nodes



Author: Zhangtao, zhangtao.it@gmail.com

Date:   2006-03-30

Commonts:

***************************************************************************************/



//set child nodes checkbox status

function TV2_SetChildNodesCheckStatus(node,isChecked)

{

    var childNodes = TV2i_GetChildNodesDiv(node);

    if(childNodes == null)

        return;

        

    var inputs = WebForm_GetElementsByTagName(childNodes,"INPUT");

    if(inputs == null || inputs.length == 0)

        return;



    for(var i = 0; i < inputs.length; i++)

    {

        if(IsCheckBox(inputs[i]))

            inputs[i].checked = isChecked;  

    } 

}   



//change parent node checkbox status after child node changed

function TV2_NodeOnChildNodeCheckedChanged(tree,node,isChecked)

{

    if(node == null)

        return;

             

    var childNodes = TV2_GetChildNodes(tree,node);

    

    if(childNodes == null || childNodes.length == 0)

        return;    

    

    var isAllSame = true;



    for(var i = 0; i < childNodes.length; i++)

    {

        var item = childNodes[i];

        var value = TV2_NodeGetChecked(item);

        

        if(isChecked != value)

        {

            isAllSame = false;

            break;

        }

    }



    var parent = TV2_GetParentNode(tree,node);

    if(isAllSame)

    {

        TV2_NodeSetChecked(node,isChecked);        

        TV2_NodeOnChildNodeCheckedChanged(tree,parent,isChecked);

    }    

    else

    {    

        TV2_NodeSetChecked(node,false);  

        TV2_NodeOnChildNodeCheckedChanged(tree,parent,false); 

    }

}



//get node relative element(etc. checkbox)

function TV2_GetNode(tree,element)

{

    var id = element.id.replace(tree.id,"");   

    id = id.toLowerCase().replace(element.type,"");    

    id = tree.id + id;

    

    var node = document.getElementById(id);

    if(node == null) //leaf node, no "A" node

        return element;

    return node;

}



//get parent node

function TV2_GetParentNode(tree,node)

{

    var div = WebForm_GetParentByTagName(node,"DIV");

    

    //The structure of node: <table>information of node</table><div>child nodes</div>

    var table = div.previousSibling; 

    if(table == null)

        return null;   

   

    return TV2i_GetNodeInElement(tree,table);

}



//get child nodes array

function TV2_GetChildNodes(tree,node)

{

    if(TV2_NodeIsLeaf(node))

        return null;

    

    var children = new Array();

    var div = TV2i_GetChildNodesDiv(node);

    var index = 0;

    

    for(var i = 0; i < div.childNodes.length; i++)

    {

        var element = div.childNodes[i];        

        if(element.tagName != "TABLE")

            continue; 

        

        var child = TV2i_GetNodeInElement(tree,element);

        if(child != null)

            children[index++] = child;

    }

    return children;

}



function TV2_NodeIsLeaf(node)

{

    return !(node.tagName == "A"); //Todo

}



function TV2_NodeGetChecked(node)

{

    var checkbox = TV2i_NodeGetCheckBox(node);   

    return checkbox.checked;

}



function TV2_NodeSetChecked(node,isChecked)

{

    var checkbox = TV2i_NodeGetCheckBox(node);

    if(checkbox != null)

     checkbox.checked = isChecked;

}



function IsCheckBox(element)

{   

    if(element == null)

        return false;

    return (element.tagName == "INPUT" && element.type.toLowerCase() == "checkbox");

}



//get tree

function TV2_GetTreeById(id)

{

    return document.getElementById(id);

}



//////////////////////////////////////////////////////////////////////////////////////////////

//private mothods, with TV2i_ prefix

//////////////////////////////////////////////////////////////////////////////////////////////



//get div contains child nodes

function TV2i_GetChildNodesDiv(node)

{

    if(TV2_NodeIsLeaf(node))

        return null;

        

    var childNodsDivId = node.id + "Nodes";

    return document.getElementById( childNodsDivId );

}



//find node in element

function TV2i_GetNodeInElement(tree,element)

{

    var node = TV2i_GetNodeInElementA(tree,element);

    if(node == null)

    {

        node = TV2i_GetNodeInElementInput(tree,element);

    }

    return node;

}



//find "A" node 

function TV2i_GetNodeInElementA(tree,element)

{

    var as = WebForm_GetElementsByTagName(element,"A");

    if(as== null || as.length == 0)

        return null;



    var regexp = new RegExp("^" + tree.id + "n\\d+$");



    for(var i = 0; i < as.length; i++)

    {

        if(as[i].id.match(regexp))

        {

            return as[i];

        }

    }      

    return null; 

}



//find "INPUT" node

function TV2i_GetNodeInElementInput(tree,element)

{

    var as = WebForm_GetElementsByTagName(element,"INPUT");

    if(as== null || as.length == 0)

        return null;

        

    var regexp = new RegExp("^" + tree.id + "n\\d+");



    for(var i = 0; i < as.length; i++)

    {

        if(as[i].id.match(regexp))

        {

            return as[i];

        }

    }      

    return null; 

}



//get checkbox of node

function TV2i_NodeGetCheckBox(node)

{

    if(IsCheckBox(node))

        return node;

        

    var id = node.id + "CheckBox";

    return document.getElementById(id);   

}

wwd252 2008-07-23

打赏
举报



<script type="text/javascript" language="javascript" src="JS/TreeView2.js"></script>

    

    <script language ="javascript" type="text/javascript"> 

    function OnTreeNodeChecked() 

    { 

        var element = window.event.srcElement; 

        if (!IsCheckBox(element)) 

            return; 



        var isChecked = element.checked; 

        var tree = TV2_GetTreeById("Product_tree"); 

        var node = TV2_GetNode(tree,element); 



        TV2_SetChildNodesCheckStatus(node,isChecked); 



        var parent = TV2_GetParentNode(tree,node); 

        TV2_NodeOnChildNodeCheckedChanged(tree,parent,isChecked); 



    } 

   </script>

 <script type="text/javascript">

          function chkAll()

        {

            //debugger;

          var chkall= document.all["chkall"];

          var chkother= document.getElementsByTagName("input");

            for (var i=0;i<chkother.length;i++)

           {

                 if( chkother[i].type=='checkbox')

              {

                  if(chkother[i].id.indexOf('Product_tree')>-1)

                  {

                       if(chkall.checked==true)

                       {

                           chkother[i].checked=true;

                     }

                      else

                   {

                           chkother[i].checked=false;

                        }

                    }

                 }

            }

       }

    </script>



<html>

<table id="Table1" cellspacing="0" cellpadding="0" width="100%" border="0"   >

                                    <tr >

                                        <td align="left" colspan="2" height="34" style="height: 28px; background-color: aliceblue"

                                            valign="middle">

                                              <strong>

                                                地区定向

                                            </strong>

                                        </td>

                                    </tr>

                                    <tr >

                                        <td >

                                         <input id="chkall" type="checkbox"  onclick="chkAll();" />全选/取消

                                        </td>

                                    </tr>

                                    <tr>

                                    <td > 

                                     

                                    <asp:TreeView ID="Product_tree" runat="server" ShowCheckBoxes="All"  OnClick="OnTreeNodeChecked()" >

                                        </asp:TreeView>

                                    

                                    </td>

                                    </tr>

                                    </table> 

</htmL>

wolfsky1994 2008-07-23

打赏
举报

换梅花雪树吧
treeview当节点超过300个后，如果一次性加载速度真是相当的慢了

devilsu 2008-07-23

打赏
举报

藏起来！

DemonAngle 2008-07-23

打赏
举报

来的不是一般的晚啊，哎

尐孑 2008-07-23

打赏
举报

[Quote=引用 5 楼 hxling1981 的回复:]
JScript code
//全选TreeView
function client_OnTreeNodeChecked()
{
var obj = window.event.srcElement;
var treeNodeFound = false;
var checkedState;
if (obj.tagName == "INPUT" && obj.type == "checkbox")
{
var treeNode = obj;
checkedState = treeNode.checked;
do
{
obj = obj.parentElement;
} while (obj.tagName != "TA…
[/Quote]

Jinglecat 2008-07-23

打赏
举报

父子节点CheckBox的级联选择
http://www.cnblogs.com/itrust/archive/2006/04/03/365439.aspx

fellowcheng 2008-07-23

打赏
举报

function ShowCheckBox()

    {

        var ele = event.srcElement;

        //单击节点上的CheckBox获取所有子节点

        if(ele.type=='checkbox') 

        {

            var childrenDivID = ele.id.replace('CheckBox','Nodes');

            var div = document.getElementById(childrenDivID);

            if(div!=null) 

            {

                var checkBoxs = div.getElementsByTagName('INPUT');

                for(var i=0;i<checkBoxs.length;i++) 

                {

					if(checkBoxs[i].type=='checkbox')

					{

						checkBoxs[i].checked=ele.checked;

						var ml=document.getElementById(checkBoxs[i].id).parentElement.parentElement.parentElement.getElementsByTagName("INPUT");

					    if(ml.length>1)

					    {

					        if(ele.checked)

					        {

					            SelectUser(ml[1].value,ml[1].title);

                            }

                            else

                            {

                                RemoveUser(ml[1].value,ml[1].title); 

                            }  

                        }

					}

                }

            }

            else

            {

                var ml=document.getElementById(ele.id).parentElement.parentElement.parentElement.getElementsByTagName("INPUT");

                if(ele.checked)

                   SelectUser(ml[ml.length-1].value,ml[ml.length-1].title);

                else

                   RemoveUser(ml[ml.length-1].value,ml[ml.length-1].title);

            }

        }

    }

qqhahazxxqq 2008-07-23

打赏
举报

高手可真多还满热心不错学习~~!!!

JeffChung 2008-07-23

打赏
举报

up，我在06年学asp.net的时候写过博客

权限树中Checkbox的操作
　　假设有如下三条规则：
　　1、该节点可以访问，则他的父节点也必能访问；
　　2、该节点可以访问，则他的子节点也都能访问；
　　3、该节点不可访问，则他的子节点也不能访问。
......

hy_lihuan 2008-07-23

打赏
举报

呵呵，看来不用回答了；不过这样的方法在数据量较大的情况下速度还是比较慢的，没有太好的解决办法

qian6688099 2008-07-23

打赏
举报

private void SetNodeCheckStatus(TreeNode tn, bool Checked)
{
if (tn == null) return;
//添加所有子节点
foreach (TreeNode tnChild in tn.Nodes)
{
tnChild.Checked = Checked;
SetNodeCheckStatus(tnChild, Checked);
}

//判断父节点
TreeNode tnParent = tn;

int nNodeCount = 0;

while (tnParent.Parent != null)//有父节点
{

tnParent = (TreeNode)(tnParent.Parent);

nNodeCount = 0;

foreach (TreeNode tnTemp in tnParent.Nodes)
{
if (tnTemp.Checked == true)
{
// tnTemp.Parent.Checked=true;
nNodeCount++;
break;
}
}

if (nNodeCount >0)

tnParent.Checked = true;

else

tnParent.Checked = false;

}

}
这是我在c/s中实现联动写的代码，在checkded事件里面调用就可以了