zoukankan      html  css  js  c++  java
  • [原创]通过点击节点或选择节点前checkbox实现树节点单选功能!

    描述一下需求:

          加入有3个第一层的节点,然后这个三个第一层的节点下面都有3到5个不等的子节点。在每个第一层下面的子节点要单选一个,提交的时候点击另外的一个Button就可以了。上次你做的Demo,可以实现这个功能了,但是如果用户直接在CheckBOx而不是点节点的话,还是可以多选。后来我处理为不显示CheckBOx,点击后才出现CheckBOx,这样避免用户直接点CheckBox而出现在一个父节点下面选两个的情况。但老板要求必须全部都有CheckBox,并且点CheckBOx和点节点需要有同样的效果,所有我一直想法当用户点节点前面的CheckBox,也相当于点节点的效果,就是能在客户端触发一下Click。


    <script language="javascript">
             
    function CheckOne()
             {
              
    var cIndex=TreeView1.clickedNodeIndex;
             
              
              
    var tmp=cIndex.split(".");
              
    if (tmp.length==2)  //代表都是第2层节点
              {
                
    var pNode=TreeView1.getTreeNode(cIndex);
                
    var parentNode=pNode.getParent();
                
    var NodeArray =new Array();
                NodeArray
    =parentNode.getChildren();
                
    for(var i=0;i<NodeArray.length;i++)
                {
                    
    var cNode=NodeArray[i];
                    cNode.setAttribute('Checked','
    false');
                    
    if (cNode.getAttribute("Text")==pNode.getAttribute("Text"))
                    {
                     cNode.setAttribute('Checked','
    true');
                     document.all(
    "Hidden1").value=cNode.getAttribute("Text");
                    
                    }
                    
                }
              }
             }
            
    </script>

    <DIV style="FONT-SIZE: 12px; Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" ms_positioning="text2D"><FONT face="Times New Roman">再详细的描述一下需求吧:<BR>
                        加入有3个第一层的节点,然后这个三个第一层的节点下面都有3到5个不等的子节点。在每个第一层下面的子节点要单选一个,提交的时候点击另外的一个Button就可以了。上次你做的Demo,可以实现这个功能了,但是如果用户直接在CheckBOx而不是点节点的话,还是可以多选。后来我处理为不显示CheckBOx,点击后才出现CheckBOx,这样避免用户直接点CheckBox而出现在一个父节点下面选两个的情况。但老板要求必须全部都有CheckBox,并且点CheckBOx和点节点需要有同样的效果,所有我一直想法当用户点节点前面的CheckBox,也相当于点节点的效果,就是能在客户端触发一下Click。
    </FONT><BR>
                    
    <BR>
                
    </DIV>
                
    <iewc:TreeView id="TreeView1" style="Z-INDEX: 102; LEFT: 8px; POSITION: absolute; TOP: 136px" runat="server">
                    
    <iewc:TreeNode Text="Node0" Expanded="True">
                        
    <iewc:TreeNode CheckBox="True" Text="Node3"></iewc:TreeNode>
                        
    <iewc:TreeNode CheckBox="True" Text="Node4"></iewc:TreeNode>
                        
    <iewc:TreeNode CheckBox="True" Text="Node5"></iewc:TreeNode>
                    
    </iewc:TreeNode>
                    
    <iewc:TreeNode Text="Node1">
                        
    <iewc:TreeNode Text="Node6"></iewc:TreeNode>
                        
    <iewc:TreeNode Text="Node7"></iewc:TreeNode>
                        
    <iewc:TreeNode Text="Node8"></iewc:TreeNode>
                    
    </iewc:TreeNode>
                    
    <iewc:TreeNode Text="Node2">
                        
    <iewc:TreeNode Text="Node9"></iewc:TreeNode>
                        
    <iewc:TreeNode Text="Node10"></iewc:TreeNode>
                        
    <iewc:TreeNode Text="Node11"></iewc:TreeNode>
                    
    </iewc:TreeNode>
                
    </iewc:TreeView><INPUT id="Hidden1" style="Z-INDEX: 103; LEFT: 24px; POSITION: absolute; TOP: 296px" type="hidden"
                    name
    ="Hidden1" runat="server">
                
    <asp:Button id="Button1" style="Z-INDEX: 104; LEFT: 24px; POSITION: absolute; TOP: 440px" runat="server"
                    Text
    ="Submit"></asp:Button>
                
    <asp:Label id="Label1" style="Z-INDEX: 105; LEFT: 96px; POSITION: absolute; TOP: 448px" runat="server"
                    Width
    ="280px" ForeColor="Red" Font-Size="12px"></asp:Label>

    Imports Microsoft.Web.UI.WebControls
    Private Sub Page_Load(ByVal sender As System.ObjectByVal e As System.EventArgs) Handles MyBase.Load
            TreeView1.Attributes.Add(
    "oncheck""javascript:CheckOne();")
            TreeView1.Attributes.Add(
    "onclick""javascript:CheckOne();")
            
    Dim tnode As TreeNode
            
    For Each tnode In TreeView1.Nodes(0).Nodes
                
    If tnode.Text = Hidden1.Value.Trim() Then
                    tnode.Checked 
    = True
                
    Else
                    tnode.Checked 
    = False
                
    End If
            
    Next
        
    End Sub


        
    Private Sub Button1_Click(ByVal sender As System.ObjectByVal e As System.EventArgs) Handles Button1.Click
            Label1.Text 
    = "您选择的节点为:" + Hidden1.Value
        
    End Sub
  • 相关阅读:
    Atitit.随时间变色特效 ---包厢管理系统的规划
    Atitit.request http乱码的设计防止 检测与解决最近实践p825 attilax总结.doc
    Atitit.request http乱码的设计防止 检测与解决最近实践p825 attilax总结.doc
    atitit.薄伽梵歌overview  attilax 读后感
    Atitit。 《吠陀》 《梨俱吠陀》overview 经读后感  是印度上古时期一些文献的总称
    Atitit。 《吠陀》 《梨俱吠陀》overview 经读后感  是印度上古时期一些文献的总称
    atitit.薄伽梵歌overview  attilax 读后感
    Atitit 《摩奴法典》overivew 读后感 不是由国王 颁布的,而是 僧侣编制
    Atitit 《摩奴法典》overivew 读后感 不是由国王 颁布的,而是 僧侣编制
    Atitit.执行cli cmd的原理与调试
  • 原文地址:https://www.cnblogs.com/goody9807/p/150627.html
Copyright © 2011-2022 走看看