XX.aspx页面中:

<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" Style="left: 24px;
            position: relative; top: 56px" οnclick="client_OnTreeNodeChecked(event);" ShowLines="True"  meta:resourcekey="TreeViewModulesResource1" ImageSet="BulletedList4"   ExpandDepth="0" Target="middle">
            <Nodes>
                <asp:TreeNode Text="教育" Value="教育">
                    <asp:TreeNode Text="111" Value="111"></asp:TreeNode>
                    <asp:TreeNode Text="222" Value="222"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="新闻" Value="新闻">
                    <asp:TreeNode Text="111" Value="111"></asp:TreeNode>
                    <asp:TreeNode Text="222" Value="222"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="体育" Value="体育">
                    <asp:TreeNode Text="111" Value="111"></asp:TreeNode>
                    <asp:TreeNode Text="222" Value="222"></asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
        </asp:TreeView>

页面js 实现:
 <script language="javascript"type="text/javascript">
        //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 = IsMyChildCheckBoxsUnChecked(childCheckBox);         
    }
    return retVal;
}

同时实现全选:

Html:

<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">
                                            &nbsp; <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>

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);  
}

转载于:https://www.cnblogs.com/imghu/archive/2011/08/02/2124544.html

.Net 的 Web 项目中 关于TreeView 的 checkBox 的操作……相关推荐

  1. Java Web项目中使用Freemarker生成Word文档

    Web项目中生成Word文档的操作屡见不鲜,基于Java的解决方案也是很多的,包括使用Jacob.Apache POI.Java2Word.iText等各种方式,其实在从Office 2003开始,就 ...

  2. java web 操作word文档_Java Web项目中使用Freemarker生成Word文档

    Web项目中生成Word文档的操作屡见不鲜.基于Java的解决方式也是非常多的,包含使用Jacob.Apache POI.Java2Word.iText等各种方式,事实上在从Office 2003開始 ...

  3. JAVA Web项目中所出现错误及解决方式合集(不断更新中)

    JAVA Web项目中所出现错误及解决方式合集 前言 一.几个或许会用到的软件下载官网 二.Eclipse的[preferences]下没有[sever]选项 三.Tomcat的安装路径找不到 四.T ...

  4. maven mybatis mysql_Java Web学习系列——Maven Web项目中集成使用Spring、MyBatis实现对MySQL的数据访问...

    标签: 本篇内容还是建立在上一篇Java Web学习系列--Maven Web项目中集成使用Spring基础之上,对之前的Maven Web项目进行升级改造,实现对MySQL的数据访问. 添加依赖Ja ...

  5. 在java web项目中编写自己的代码生成器

    在java web项目中编写自己的代码生成器 转载于:https://www.cnblogs.com/punisher/p/5909943.html

  6. 在web项目中发布jaxws

    概述 在web项目中发布基于jaxws的webservice. 参考文章:用JAX-WS在Tomcat中发布WebService 参考文章说,如果不是servlet3.0及以上,需要配置servlet ...

  7. Web项目中引进EasyUI的路径问题

    场景 Web项目中引入EasyUI,新建test.html,页面中引入EasyUI相关资源文件. 运行后页面并没有改变,打开检查提示404找不到资源. 实现 项目路径为: 路径引用错误: test.h ...

  8. 由web项目中上传图片所引出的路径问题

    我在做javaweb项目的时候,有个项目中需要进行图片的上传,有次我重新部署项目后,发现之前上传的图片不见了,最后找出原因:图片上传在服务器目录上,而不是绝对路径,所以特别想弄清楚javaweb项目中 ...

  9. maven web项目中的web.xml的版本如何更改

    maven web项目中的web.xml的版本如何更改 问题 因web.xml的版本太低不支持el表达式的问题(maven3.6版本通过底层的maven web插件生成的最终的web.xml文件版本只 ...

最新文章

  1. Spring学习总结1——bean的生命周期
  2. 死磕Java并发:J.U.C之AQS:CLH同步队列
  3. python基础教程第二版和第三版哪个好-python基础教程 2版和3版哪个适合新手?!...
  4. 开发工具,编辑器字体
  5. V3S中换2.0寸LCD时MINIGUI无显示的问题的解决过程
  6. MyBatis映射文件(二)
  7. java m4a文件拼接_面试官:为啥不提倡字符串拼接?看阿里java开发手册怎么说
  8. WEBTIMER控件研究的心得:丢开书本做一个WebTimer
  9. DotNet4应用程序打包工具(把DotNet4安装程序打包进你的应用程序;WINAPI开发,无dotNet环境也可顺利执行)【一】整体思路...
  10. 大型情感剧集Selenium:6_selenium中的免密登陆与cookie操作
  11. (50)System Verilog类静态变量实例
  12. 创建的maven子项目怎么访问接口404_【经验分享】新手学Java编程语言怎么入门?...
  13. 3.11 框架和样式表
  14. 计算机保研英语,计算机专业保研面试英语自我介绍
  15. 魔兽n服务器网站,wowN服如何进入_魔兽世界Nostalrius服务器入驻攻略_快吧游戏
  16. 果园节水灌溉能否实现远程智能控制
  17. CSDN的文章如何快速转移到微信公众号上
  18. 一个vue文件应该有的成分_详解vue为什么要求组件模板只能有一个根元素
  19. utf-8中一个汉字是3个字节,你知道吗?
  20. 高考数学辅导:解三角形的综合应用-图文(解析版)

热门文章

  1. Bellman_Ford边上权值为任意值的单源最短路径问题(+路径打印)边集合与邻接表两种实现
  2. Program Library HOWTO(1)
  3. Unity3D基础31:脚本生命周期
  4. bzoj 1661: [Usaco2006 Nov]Big Square 巨大正方形(枚举)
  5. 扩展欧几里得原理与模板
  6. 吴恩达神经网络和深度学习-学习笔记-11-Momentum梯度下降法
  7. win10 Anaconda 安装教程
  8. 贺利坚老师汇编课程30笔记:将数据、代码、栈放入不同段
  9. 数据驱动和关键字驱动
  10. 数据库路由中间件MyCat - 源代码篇(17)