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

来源：互联网发布：怎么评价张学良知乎编辑：程序博客网时间：2024/05/22 04:27

/**************************************************************************   ASP.NET 2.0 TreeView控件 客户端CheckBox Chanage事件,兼容IE,OPERA,FIREFOX 1. 每勾选一个节点就要遍历勾选它的所有子节点         setChildChecked    同时循环勾选父节点                                                     setParentChecked2. 每取消勾选一个节点就要遍历取消它的所有子节点  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;}//判断对象是否为CheckBoxfunction 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");}//得到父节点的CheckBoxfunction 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;}//设置节点的父节点Checkedfunction 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);}//当父节点的所有子节点都未被选中时,设置父节点UnCheckedfunction 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);}//设置节点的子节点UnCheckedfunction 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);     }}//设置节点的子节点Checkedfunction 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);     }}//判断该节点的子节点是否都为UnCheckedfunction 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);            }        }    }