教程集 www.jiaochengji.com
教程集 >  脚本编程  >  Asp.net  >  正文 asp.net TreeView复选框全选或全不选的实现方法

asp.net TreeView复选框全选或全不选的实现方法

发布时间:2016-03-21   编辑:jiaochengji.com
本文介绍了在asp.net的TreeView中实现复制框全选或全不选的方法,有需要的朋友,可参考下。

方法1、TreeView 控件不会公开 AutoPostBack 属性。
因此,若要提交复选框选择,必须在页上放置一个控件(如 Button Web 服务器控件),以便将信息回发至服务器。

方法2,在客户端写JavaScript脚本
  问题:TreeView是动态生成的,何时调用全选的脚本?
  在根节点的checkbox上的onclick事件上调用全选的JavaScript脚本函数。
  那么自动生成的页中的HTML代码里没有onclick这个事件,怎么办?
  在页面一加载的时候(Page_Load事件中),添加一个:
(给根节点加一个onclick事件):
 

复制代码 代码示例:
string str ="<script type='text/javascript' language='javascript'>
document.getElementByIdx_x('TreeView1n0CheckBox').setAttribute('onclick','rec()');</script>";
   ClientScriptManager cs = Page.ClientScript;
    cs.RegisterStartupScript(this.GetType(),"addOnclick",str);
 

运行无错,但实现不了想要的效果。原因在于根本没有写"rec()"方法的实现。
实现代码:
 

复制代码 代码示例:
<script type="text/javascript" language="javascript">
function rec() {
  var obj = document.getElementByIdx_x('TreeView1n0CheckBox');  //得到根节点元素
    for (var i = 0; i < document.getElementsByTagName_r("input").length; i++) {
         if (document.getElementsByTagName_r("input").item(i).type == "checkbox") {
        document.getElementsByTagName_r("input").item(i).checked=obj.checked;
    } }
}
 </script>
 

效果基本完成,代码仍需优化。

方法3,jquery实现,任何一级节点都可以实现全选或全不选!
 

复制代码 代码示例:

<%@ Page Language="C#" CodeBehind="TreeView.aspx.cs" Inherits="TreeView.TreeView" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>TreeView全选或全不选-www.jbxue.com</title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            //为了不至于和页面上其他元素混乱,所以把TreeView控件放在一个id为Treeview的div中,然后
            //再查找checkbox
            $("#Treeview table tr td  input[type=checkbox]").click(
             function () {

                 $("#Treeview div[id=" + $(this).attr("id").toString().replace(/CheckBox/, "Nodes") + "] table tr td  input[type=checkbox]")
                    .attr("checked", $(this).attr("checked"));
                         }
            );
             });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id ="Treeview">
        <asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All">
            <Nodes>
                <asp:TreeNode Text="学院" Value="学院">
                    <asp:TreeNode Text="工商学院" Value="工商学院"></asp:TreeNode>
                    <asp:TreeNode Text="计算机学院" Value="计算机学院"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="市" Value="市">
                    <asp:TreeNode Text="济南市" Value="济南市">
                        <asp:TreeNode Text="历城区" Value="历城区"></asp:TreeNode>
                        <asp:TreeNode Text="章丘市" Value="章丘市"></asp:TreeNode>
                    </asp:TreeNode>
                    <asp:TreeNode Text="济宁市" Value="济宁市"></asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
        </asp:TreeView>
    </div>
    </form>
</body>
</html>
 

说明:
建议把javascript脚本单独保存为一个js文件,以方便复用。

您可能感兴趣的文章:
asp.net TreeView复选框全选或全不选的实现方法
c# TreeView添加右键快键菜单的二个方法
C# winform treeview添加右键菜单并选中节点的方法
C# TreeView控件实例代码(重新设置TreeView、删除节点、右键选中等)
ASP.NET中使用Treeview和XML
js代码获取TreeView控件选中节点的Text和Value
asp.net winform TreeView节点中的CheckBox 禁用实例
jquery复选框全选/取消示例
winform里的treeview能够跟数据绑定吗?我不知道。里面有treeview的用法。是转来的
ASP.NET中TreeView控件使用小结

[关闭]
~ ~