100分！求教treeview checkbox js 级联选择的问题

bu4ni 2009-02-06 06:33:48
三级目录的，比如：


   <asp:TreeView id="SampleTreeView" runat="server" ShowCheckBoxes=All>  

        <Nodes>

          <asp:TreeNode Value="Home"

          NavigateUrl =""

            Text="Home"

            Target="Content" 

            Expanded="True"

            SelectAction="SelectExpand">

            

            <asp:TreeNode Value="1" 

              NavigateUrl="" 

              Text="Page1"

              Target="Content">

                <asp:TreeNode Value="2" 

                              NavigateUrl="" 

                              Text="Section 1"

                              Target="Content">

                    <asp:TreeNode Value="3" 

                              NavigateUrl="" 

                              Text="Section 1"

                              Target="Content"/>

                    <asp:TreeNode Value="4" 

                              NavigateUrl="" 

                              Text="Section 1"

                              Target="Content"/>

                </asp:TreeNode>

                <asp:TreeNode Value="5" 

                              NavigateUrl="" 

                              Text="Section 2"

                              Target="Content">

                </asp:TreeNode>

            </asp:TreeNode>

            

              <asp:TreeNode Value="6" 

                NavigateUrl=""

                Text="Page 2"

                Target="Content">

                <asp:TreeNode Value="7" 

                              NavigateUrl="" 

                              Text="Section 1"

                              Target="Content">

                </asp:TreeNode>

                <asp:TreeNode Value="8" 

                              NavigateUrl="" 

                              Text="Section 2"

                              Target="Content">

                </asp:TreeNode>

              </asp:TreeNode> 

          </asp:TreeNode>

        </Nodes>

      </asp:TreeView>


网上找了许多相关的代码，但只能实现二级节点的联动。即是说，第三级的节点勾选的时候，其父节点也勾选，同时递归到根节点，此时要判断根节点下的所有子节点都选中了，根节点才打勾(包括三级节点也要判断).
网上的方法，当二级节点存在子节点 ，此时二级节点也变为一个父节点，就不懂怎么同时也响应根节点了

主要是当二级节点下存在子节点，则此二级节点本身就是一个父节点，即使勾选它，因为它变成父节点了，勾选后就不和根节点联动了。

请大虾们帮帮忙，（请附上demo）。感激不尽，此问题卡了一天了。分不够再加。谢谢先`
...全文
422 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhangsanma 2012-07-12
  • 打赏
  • 举报
 回复
3年后的今天我遇到了这个问题，谢谢“落叶纷纷”~~！
zjq0034 2009-04-22
  • 打赏
  • 举报
 回复
相同问题……
帮顶！
zjq0034 2009-04-22
  • 打赏
  • 举报
 回复 
 function OnTreeNodeChecked() 

        { 

            var ele = event.srcElement; 

            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 div = GetParentByTagName(ele,'DIV');

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

                    var parentCheckBoxID = div.id.replace('Nodes','CheckBox');

                    var parentCheckBox = document.getElementById(parentCheckBoxID);

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

                   {

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

                       {

                            parentCheckBox.checked = true;

                            return;

                        }

                    }

                    parentCheckBox.checked = false;

                }

                else

                {

                    var div = GetParentByTagName(ele,'DIV');

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

                    var parentCheckBoxID = div.id.replace('Nodes','CheckBox');

                    var parentCheckBox = document.getElementById(parentCheckBoxID);

                    

                    var basediv = GetParentByTagName(parentCheckBox,'DIV');

                    var parentCBKs = basediv.getElementsByTagName('INPUT');

                    var baseCheckBoxID = basediv.id.replace('Nodes','CheckBox');

                    var baseCheckBox = document.getElementById(baseCheckBoxID);

                    

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

                    {

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

                       {

                            parentCheckBox.checked = true;

                            for(var j=0;j<parentCBKs.length;j++)

                            {

                                if(parentCBKs[j].type=='checkbox' &&  parentCBKs[j].checked)

                                {

                                    baseCheckBox.checked = true;

                                }

                            }

                            return;

                        }

                    }

                    parentCheckBox.checked = false;

                    var checkedcount = 0;

                    for(var j=0;j<parentCBKs.length;j++)

                    {

                        if(parentCBKs[j].type=='checkbox' &&  parentCBKs[j].checked)

                        {

                            checkedcount++;

                        }

                    }

                    if(checkedcount == 0)

                    {

                        baseCheckBox.checked = false;

                    }

                }

                

            } 

        }



        function GetParentByTagName(element, tagName) 

        {

            var parent = element.parentNode;

            var upperTagName = tagName.toUpperCase();

            while (parent && (parent.tagName.toUpperCase() != upperTagName)) 

            {

                parent = parent.parentNode ? parent.parentNode : parent.parentElement;

            }

            return parent;

        }
zjq0034 2009-04-22
  • 打赏
  • 举报
 回复
哥们，问题解决了
代码如下：

function OnTreeNodeChecked()
{
var ele = event.srcElement;
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 div = GetParentByTagName(ele,'DIV');
var checkBoxs = div.getElementsByTagName('INPUT');
var parentCheckBoxID = div.id.replace('Nodes','CheckBox');
var parentCheckBox = document.getElementById(parentCheckBoxID);
for(var i=0;i<checkBoxs.length;i++)
{
if(checkBoxs[i].type=='checkbox' && checkBoxs[i].checked)
{
parentCheckBox.checked = true;
return;
}
}
parentCheckBox.checked = false;
}
else
{
var div = GetParentByTagName(ele,'DIV');
var checkBoxs = div.getElementsByTagName('INPUT');
var parentCheckBoxID = div.id.replace('Nodes','CheckBox');
var parentCheckBox = document.getElementById(parentCheckBoxID);

var basediv = GetParentByTagName(parentCheckBox,'DIV');
var parentCBKs = basediv.getElementsByTagName('INPUT');
var baseCheckBoxID = basediv.id.replace('Nodes','CheckBox');
var baseCheckBox = document.getElementById(baseCheckBoxID);

for(var i=0;i<checkBoxs.length;i++)
{
if(checkBoxs[i].type=='checkbox' && checkBoxs[i].checked)
{
parentCheckBox.checked = true;
for(var j=0;j<parentCBKs.length;j++)
{
if(parentCBKs[j].type=='checkbox' && parentCBKs[j].checked)
{
baseCheckBox.checked = true;
}
}
return;
}
}
parentCheckBox.checked = false;
var checkedcount = 0;
for(var j=0;j<parentCBKs.length;j++)
{
if(parentCBKs[j].type=='checkbox' && parentCBKs[j].checked)
{
checkedcount++;
}
}
if(checkedcount == 0)
{
baseCheckBox.checked = false;
}
}

}
}

function GetParentByTagName(element, tagName)
{
var parent = element.parentNode;
var upperTagName = tagName.toUpperCase();
while (parent && (parent.tagName.toUpperCase() != upperTagName))
{
parent = parent.parentNode ? parent.parentNode : parent.parentElement;
}
return parent;
}
bu4ni 2009-02-10
  • 打赏
  • 举报
 回复
看来,这下没辙了,郁闷~~
bu4ni 2009-02-09
  • 打赏
  • 举报
 回复
谢谢先了,下面是这个树的js.网上查到的,但是不能实现N级级联,也即是说若第N级子节点下也存在子节点,就是说这个节点也变成了父节点,下面的代码就不能级联到上一级的节点了.期待...分不够可再加,谢谢先了



function _treeviewsleect()

   {   

    var o = window.event.srcElement;

    if (o.tagName == "INPUT" && o.type == "checkbox") //点击treeview的checkbox是触发

    {

       var d=o.id;//获得当前checkbox的id;

       

       var e= d.replace("CheckBox","Nodes");//通过查看脚本信息,获得包含所有子节点div的id

       

       var div= document.getElementById(e);//获得div对象

       

      if(div!=null)  //如果不为空则表示,存在子节点

      {

           var check=div.getElementsByTagName("INPUT");//获得div中所有的以input开始的标记

            

           for(i=0;i<check.length;i++)    

           {

                if(check[i].type=="checkbox") //如果是checkbox

                {

                  check[i].checked=o.checked;//字节点的状态和父节点的状态相同,即达到全选

                }



           }

            



      }

      else  //点子节点的时候,使父节点的状态改变,即不为全选

      {

          var divid=o.parentElement.parentElement.parentElement.parentElement.parentElement; //子节点所在的div



          var id= divid.id.replace("Nodes","CheckBox"); //获得根节点的id

          

          var checkbox=divid.getElementsByTagName("INPUT"); //获取所有子节点数

          var s=0;

          

             

          for(i=0;i<checkbox.length;i++)    

           {

              if(checkbox[i].checked)  //判断有多少子节点被选中

              {

                 s++;   

              }

           }

  

        if(s==checkbox.length)  //如果全部选中 或者 选择的是另外一个根节点的子节点 ，

        {                               //    则开始的根节点的状态仍然为选中状态

         document.getElementById(id).checked=true;

        }

        else

        {                               //否则为没选中状态

         document.getElementById(id).checked=false;

        }



      }    



    } 

   

}
vVolF_28 2009-02-09
  • 打赏
  • 举报
 回复
楼主甭急，这个问题其实很好解决的。。
无论是2级级联还是N级级联，他们都有一个共同点，最顶层的节点是没有父节点的。
所以，你可以采用递归的方式来做。判断条件就是当前节点不存在父节点时返回。。
如果还搞不定，等下午有空时我再贴上具体代码。
bu4ni 2009-02-09
  • 打赏
  • 举报
 回复
谢~LS,但是此方法无法实现三级级联~
Jinglecat 2009-02-09
  • 打赏
  • 举报
 回复
看看这个能不能满足你的要求

TreeView几个小技巧
xiang_ailove 2009-02-09
  • 打赏
  • 举报
 回复
帮顶一下

学习中......
bu4ni 2009-02-09
  • 打赏
  • 举报
 回复
....有人帮帮忙不?
hearyone 2009-02-09
  • 打赏
  • 举报
 回复
顶
bu4ni 2009-02-09
  • 打赏
  • 举报
 回复
人呢?.......哎~~~~
ZJ159 2009-02-07
  • 打赏
  • 举报
 回复
顶顶
kingya2008 2009-02-07
  • 打赏
  • 举报
 回复
什么？？？？
xycit 2009-02-07
  • 打赏
  • 举报
 回复
up
RHCL 2009-02-07
  • 打赏
  • 举报
 回复
没做过,帮顶顶~~
浮生若梦丶 2009-02-06
  • 打赏
  • 举报
 回复
很晚了，可惜了
bu4ni 2009-02-06
  • 打赏
  • 举报
 回复
别沉啊，顶~
C#树形菜单的CheckBox级联选择
实现树形结构的CheckBox的子节点选中所有父级节点，级联选择功能，内有具体案例
TreeView Javascrip实现级联选择
TreeView Javascrip实现级联选择
从新手小白进入WinForm编程 (VS2019)
WinForm框架 是 Windows Form 的简称，是美国微软公司Microsoft开发基于 .NET Framework 平台的桌面运用程序框架，一般使用 C#语言 编写。 WinForm框架可用于设计窗体和可视控件，采用面向对象语言C#，可快速创建绚丽漂亮的基于Windows的桌面应用程序,提供丰富的控件与第三方开源组件，依靠.Net平台的成熟生态，让开发者可以高效快速的开发企业级项目！本课程是黄老师的 .Net平台开发系列课程之一，通过WinForm框架控件与精炼知识点的梳理与细致讲解，结合代码实战演练，帮助学员迅速掌握WinForm开发，达到企业级WinForm开发的水平！
TreeView树状多级级联
TreeView树状多级级联,不想要积分,但这平台到倒闭了, 一定要积分才发出来.
.net TreeView节点级联选择
在TreeView中实现选择父节点同时选择所有子节点，选择一个子节点同时选择其父节点，支持多级选择。取消一个子节点判断同级是否有选择，没有选择就取消父级。
.NET社区

62,074

社区成员

669,028

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章