Jquery 实现Asp.net控件 TreeView的二级节点全选/全不选

今天，被经理要求对前几天做的一个功能进行修改，实现对TreeView中内容的全选/全不选，TreeView中节点由一级变成了二级。

其实，这个功能本身并不难。但实际上，我却在这个小功能上面却耗费了相当多的时间。

原因，归根结底，是不知道TreeView在浏览器中，到底是以一个什么样的格式生成。

以至于用Jquery做的时候，N次无法找到想要的节点。

后来，经过在网上查阅相关资料，知道了，TreeView在浏览器中是以：

<div>//树
    <table>...<table/>//节点
    <div>...</div>//节点的子节点，里面包含有<table>
</div>

这样的形式，生成的。

现在，既然知道生成的规律，那么其他的便好办了。

首先 HTML代码：

    <div id="divKM" class="divStepDet">
        <div  align="right">
            <asp:LinkButton ID="lnkbtnCloseDiv" runat="server" 
              >关闭</asp:LinkButton>
        </div>
        <div >
            <asp:TreeView ID="tvKM" runat="server" Width="157px" HoverNodeStyle-CssClass="treeStyle">
<HoverNodeStyle CssClass="treeStyle"></HoverNodeStyle>
                <Nodes>
                    <asp:TreeNode ShowCheckBox="True" Text="全部" Value="全部">
                        <asp:TreeNode ShowCheckBox="True" Text="教学设备" Value="教学设备">
                            <asp:TreeNode ShowCheckBox="True" Text="数学" Value="数学"></asp:TreeNode>
                            <asp:TreeNode ShowCheckBox="True" Text="物理" Value="物理"></asp:TreeNode>
                        </asp:TreeNode>
                        <asp:TreeNode ShowCheckBox="True" Text="实验设备" Value="实验设备">
                            <asp:TreeNode ShowCheckBox="True" Text="物理实验室" Value="物理实验室"></asp:TreeNode>
                        </asp:TreeNode>
                    </asp:TreeNode>
                </Nodes>
            </asp:TreeView>
        </div>
    </div>

全部为根节点。

全部节点下，分教学设备和实验设备两个子节点。。

两个子节点下，分别有子节点。

Jquery代码：

 <script type="text/javascript">
        $(document).ready(function () {
            $("[type='checkbox']").click(function () {
                //判断是否是全选按钮， 后半句是判断是否是所需要的控件（因为该DIV下就只有一个TreeView）
                if ($(this).next().text() == "全部" && $(this).parents().eq(6).attr("id") == "divKM") {
                    //如果全选被选中
                    if ($(this).attr("checked") == true) {
                        //全选所有节点
                        $("#divKM :checkbox").attr("checked", "checked");
                    }
                    else {
                        //所有节点 全部取消
                        $("#divKM :checkbox").attr("checked", "");
                    }
                }//如果不是全选按钮
                else {//如果是二级节点被选中
                    if ($(this).parents().eq(7).attr("id") == "divKM" && $(this).attr("checked") == true) {
                        //二级节点下的所有节点为选中状态
                        $(this).parents("table").next("div").find(":checkbox").attr("checked", "checked");
                    }//如果取消选中
                    else {
                        //该节点下的子节点选中状态为未选中
                        $(this).parents("table").next("div").find(":checkbox").attr("checked", "");
                    }
                //如果当前点击的复选框的父节点下的复选框数等于被选中的复选框数，则代表该父节点下，所有子节点均被选中
                    if ($(this).parents().eq(4).find(":checkbox").size() == $(this).parents().eq(4).find(":checkbox:checked").size()) {
                        //将父节点设为选中状态
                        $(this).parents("div").prev("table").find(":checkbox").not(":first").attr("checked", "checked");
                        //如果除全部以外所有的复选框数目等于被选中的复选框的数目，则表示，所有节点都被 选中
                        if ($("#divKM :checkbox").size() - 1 == $("#divKM :checked").size()) {
                            //将全部节点设置为选中状态
                            $(this).parents("div").find(":checkbox").last().attr("checked", "checked");
                        }
                    }
                    else {//否则，将父节点设置为未选中状态
                        $(this).parents("div").prev("table").find(":checkbox").attr("checked", "");
                    }
                }

            });
        })
    </script>

由于，前期不是很清楚TreeView的生成规律，所以 该写法肯定不是最佳。还可以有许多改进。

写这个的目的，是为了防止以后如果自己忘记了，可以回过头来看看。了解思路。