Jquery 实现Asp.net控件 TreeView的二级节点全选/全不选
来源:互联网 发布:阿里云开放端口 编辑:程序博客网 时间:2024/06/03 08:59
今天,被经理要求对前几天做的一个功能进行修改,实现对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的生成规律,所以 该写法肯定不是最佳。还可以有许多改进。
写这个的目的,是为了防止以后如果自己忘记了,可以回过头来看看。了解思路。
- Jquery 实现Asp.net控件 TreeView的二级节点全选/全不选
- Asp.net 中利用JQuery实现Treeview的全选和取消全选
- JS控件ASP.NET的treeview控件全选或者取消
- asp.net TreeView控件Jquery节点选择代码
- TreeView控件实现选中父节点时全选子节点
- TreeView控件实现选中父节点时全选子节点
- TreeView控件实现选中父节点时全选子节点
- ASP.NET treeview 树控件的节点上下移动
- 用jQuery实现asp.net 2.0 treeview控件完全无刷新操作实例(AJAX的增、删、改、选择以及展开收缩节点)
- TreeView控件的父节点的全选与不选级联子节点并实现拖动子节点
- 用JQuery实现对ASP.NET TreeView控件的级连选中
- 利用递归轻松实现TreeView控件中子节点的全选操作[VB]
- Asp.net TreeView动态加载节点(二)(结合Jquery实现节点加载效果)
- Asp.net 2.0 TreeView控件使用jQuery无刷新添加节点详细说明
- Asp.net 2.0 TreeView控件使用jQuery无刷新添加节点详细说明
- asp.net treeview控件无刷新选择和删除节点(使用jquery)
- asp.net treeview控件无刷新选择和删除节点(使用jquery)
- VB.NET实现 TreeView控件查找节点,显示节点
- 一步步写驱动--module_init/module_exit
- IOS 应用程序的程序包分析
- 使用canvas绘制股票图【envision.js】
- ssh中的java.lang.NoSuchMethodError: antlr.collections.AST.getLine()异常
- Strategies for Implementing POSIX Condition Variables on Win32
- Jquery 实现Asp.net控件 TreeView的二级节点全选/全不选
- 入职一月的一点感想
- schema.xml配置和solrj的使用
- C++对象内存分配问题
- Dedecms系统站点备分数据库、搬家以及站内优化
- IOS 应用响应事件分析
- HDU 1827 强连通分量
- Your project contains errors,please fix them before running your application
- IOS 应用文件数据的读写分析