ASP.NET Treeview控件中对Checkbox的联级选择

/**************************************************************************
   ASP.NET 2.0 TreeView控件 客户端CheckBox Chanage事件,兼容IE,OPERA,FIREFOX
 1. 每勾选一个节点就要遍历勾选它的所有子节点         setChildChecked
    同时循环勾选父节点                                                     setParentChecked

2. 每取消勾选一个节点就要遍历取消它的所有子节点  setChildUnChecked
    如果同级其他的节点都未勾选,则循环取消父节点     setParentUnChecked

   CheckBox的ID形如:TreeView1n1CheckBox
   树ID+'n'+编号+'CheckBox' 编号从0开始, 
   它的所有子节点都会在ID为TreeView1n1Nodes的Div中.
**************************************************************************/

//TreeView onclick触发事件
function client_OnTreeNodeChecked(event)
{
    //得到当前所Click的对象
    var objNode;
    if(!public_IsObjectNull(event.srcElement))
    {
        //IE
        objNode = event.srcElement;
    }
    else
    {
        //FF
        objNode = event.target;
    }

    //判断是否Click的CheckBox
    if(!public_IsCheckBox(objNode))
        return;

    var objCheckBox = objNode;
    //根据CheckBox状态进行相应处理
    if(objCheckBox.checked==true)
    {
        //递归选中父节点的CheckBox
        setParentChecked(objCheckBox);
        
        //递归选中所有的子节点
        setChildChecked(objCheckBox);
    }
    else
    {        
        //递归取消选中所有的子节点
        setChildUnChecked(objCheckBox);
        
        //递归取消选中父节点(如果当前节点的所有其他同级节点也都未被选中).
        setParentUnChecked(objCheckBox);
    }
}

//判断对象是否为空
function public_IsObjectNull(element)
{
    if(element==null || element == "undefined")
        return true;
    else
        return false;
}

//判断对象是否为CheckBox
function public_IsCheckBox(element)
{
    if(public_IsObjectNull(element))
        return false;
        
    if(element.tagName!="INPUT" || element.type!="checkbox")
        return false;
    else
        return true;
}
//得到包含所有子节点的Node(Div对象)
function public_CheckBox2Node(element)
{
    var objID = element.getAttribute("ID");
    objID = objID.substring(0,objID.indexOf("CheckBox")); 
    return document.getElementById(objID+"Nodes");
}
//得到父节点的CheckBox
function public_Node2CheckBox(element)
{
    var objID = element.getAttribute("ID");
    objID = objID.substring(0,objID.indexOf("Nodes")); 
    return document.getElementById(objID+"CheckBox");
}
//得到本节点所在的Node(Div对象)
function public_GetParentNode(element) 
{
    var parent = element.parentNode;
    var upperTagName = "DIV";
    //如果这个元素还不是想要的tag就继续上溯
    while (parent && (parent.tagName.toUpperCase() != upperTagName)) 
    {
        parent = parent.parentNode ? parent.parentNode : parent.parentElement;
    }
    return parent;
}


//设置节点的父节点Checked
function setParentChecked(currCheckBox)
{ 
    var objParentNode= public_GetParentNode(currCheckBox);
    if(public_IsObjectNull(objParentNode))
        return;    
    
    var objParentCheckBox = public_Node2CheckBox(objParentNode);

    if(!public_IsCheckBox(objParentCheckBox))
        return; 
        
    objParentCheckBox.checked = true;
    setParentChecked(objParentCheckBox);
}

//当父节点的所有子节点都未被选中时,设置父节点UnChecked
function setParentUnChecked(currCheckBox)
{
    var objParentNode= public_GetParentNode(currCheckBox);
    if(public_IsObjectNull(objParentNode))
        return;   
    //判断currCheckBox的同级节点是否都为UnChecked.
    if(!IsMyChildCheckBoxsUnChecked(objParentNode))
        return;    
    
    var objParentCheckBox = public_Node2CheckBox(objParentNode);

    if(!public_IsCheckBox(objParentCheckBox))
        return; 
        
    objParentCheckBox.checked = false;    
    setParentUnChecked(objParentCheckBox);
}

//设置节点的子节点UnChecked
function setChildUnChecked(currObj)
{
    var currNode;
    if(public_IsCheckBox(currObj))
    {
        currNode = public_CheckBox2Node(currObj);
        if (public_IsObjectNull(currNode))
            return;
    }
    else
        currNode = currObj;
       
    var currNodeChilds = currNode.childNodes;
    var count = currNodeChilds.length; 
    for(var i=0;i<count;i++)
    {
        var childCheckBox = currNodeChilds[i];
        if(public_IsCheckBox(childCheckBox))
        {
            childCheckBox.checked = false;
        }
        setChildUnChecked(childCheckBox); 
    }
}

//设置节点的子节点Checked
function setChildChecked(currObj)
{ 
    var currNode;
    if(public_IsCheckBox(currObj))
    {
        currNode = public_CheckBox2Node(currObj);
        if (public_IsObjectNull(currNode))
            return;
    }
    else
        currNode = currObj;
        
    var currNodeChilds = currNode.childNodes;
    var count = currNodeChilds.length; 
    for(var i=0;i<count;i++)
    {
        var childCheckBox = currNodeChilds[i];
        if(public_IsCheckBox(childCheckBox))
        {
            childCheckBox.checked = true;
        }
        setChildChecked(childCheckBox); 
    }
}

//判断该节点的子节点是否都为UnChecked
function IsMyChildCheckBoxsUnChecked(currObj)
{
    var retVal = true;
    
    var currNode;
    if(public_IsCheckBox(currObj) && currObj.checked == true)
    {
        return false;
    }
    else
        currNode = currObj;
       
    var currNodeChilds = currNode.childNodes;
    var count = currNodeChilds.length; 
    for(var i=0;i<count;i++)
    {
        if (retVal == false)
            break;
        var childCheckBox = currNodeChilds[i];
        if(public_IsCheckBox(childCheckBox) && childCheckBox.checked == true)
        {
            retVal = false;
            return retVal;
        }
        else
            retVal = IsMyChildCheckBoxsUnChecked1(childCheckBox);         
    }
    return retVal;
}


 

 

----------------------------

后台

 tvProj.Attributes.Add("onclick", "client_OnTreeNodeChecked(event)");

 

 

=============================================

Asp.Net选择TreeView前面的复选框引起回发
记得以前写过一个代码。需要在TreeView前面的复选框选中时触发后台事件,从而引起页面其他部分数据发生改变。
当时记得好像TreeView前面的复选框的可以引发选中项改变事件,而在某项由选中变成不选中,或者由不选中变成选中时是不能触发后台事件的。
下面把它记下来,希望以后再用到时会有所帮助
1.在页面上需要设置TreeView父项和子项的、
    Checked="True" 和ShowCheckBox="True"
2.在绑定TreeVeiw时,给它添加onclick事件代码如下
  TreeView1.Attributes.Add("onclick", "postBackByObject()");//添加点击事件
注:postBackByObject是一个JavaScript函数具体代码如下
  // 点击复选框时触发事件(此事件会引起回发)
  function postBackByObject()
  {
     var o = window.event.srcElement;
     if (o.tagName == "INPUT" && o.type == "checkbox")
     {
         __doPostBack("UpdatePanel1","");  //此处前面是两个下划线(UpdatePanel1处是因为用了UpdatePanel所以才写这个控件ID的)
     } 
  }
3.postBackByObject函数引发的回传最终是触发TreeNodeCheckChanged事件的。下面只贴代码。
    /// <summary>
    /// 左边树形控件选择项改变
    /// 判断是否选择,加入右边控件
    /// </summary>
    protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
    {
        TreeNode node = TreeView1.SelectedNode;
        if (node != null && node.Parent != null) //选中节点不为空,非父节点。
        {
           //添加或移除项
        }
        else    //点击的是复选框
        {
            if (node.ChildNodes.Count > 0)   //选中的是父节点的框
            {
                SetChildChecked(node);    //复选框事件
            }
            else        //选中的是子节点
            {
                 //添加或移除项
            }
        }
    }
    /// <summary>
    /// 左边树形控件选择项改变
    /// 判断是否选择,加入右边控件
    /// </summary>
    protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
    {
        SetChildChecked(e.Node);
        // 判断是否是根节点
        if (e.Node.Parent != null)
        {
            e.Node.Parent.Checked = e.Node.Checked;
            AddSourceTable(e.Node);
        }
     }
    /// <summary>
    /// 根据父节点状态设置子节点的状态
    /// </summary>
    /// <param name="parentNode"></param>
    private void SetChildChecked(TreeNode parentNode)
    {
        foreach (TreeNode node in parentNode.ChildNodes)
        {
            node.Checked = parentNode.Checked;
            ..........         //添加或移除项
            if (node.ChildNodes.Count > 0)
            {
                SetChildChecked(node);
            }
        }
    } 



 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值