ASP.NET之TreeView复选框实现全选或全不选

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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[></asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
        </asp:TreeView>

    </div>
    </form>
</body>
</html>
可以把javascript脚本单独放在一个js文件中，可以达到很好的复用！这是今天上午闲着没事刚写的。写这些东西时，一定要注意在浏览中浏览时，把TreeView控件中的元素生成了什么东西，然后再想着怎么查找。