zoukankan      html  css  js  c++  java
  • ASP.NET之TreeView复选框实现全选或全不选

    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></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文件中,可以达到很好的复用!这是今天上午闲着没事刚写的。写这些东西时,一定要注意在浏览中浏览时,把TreeView控件中的元素生成了什么东西,然后再想着怎么查找。
  • 相关阅读:
    MSBuild、条件编译、预处理命令
    批量数据插入SqlBulkCopy
    WPF 双向绑定
    编程思想之一
    python 提交表单
    python 添加用户
    python 分页
    day9 IO多路复用
    day9 线程、进程和协程深入版
    day8 进程、线程 简介版
  • 原文地址:https://www.cnblogs.com/weixing/p/2147087.html
Copyright © 2011-2022 走看看