jquery实现的简单复选树，checkboxtree

最新推荐文章于 2023-05-10 08:38:17 发布
最新推荐文章于 2023-05-10 08:38:17 发布
阅读量6.9k 收藏 4
点赞数
分类专栏： jquery 文章标签： jquery function iterator path input stylesheet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liguiping2000/article/details/7192849
版权
 

jquery的实现方式：

Html代码   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title>jquery treeview 的选中子目录，同时选中父目录，关联选择</title>  
  5. <meta http-equiv="content-type" content="text/html;charset=utf-8">  
  6. <meta name="generator" content="editplus" />  
  7. <meta name="author" content="" />  
  8. <meta name="keywords" content="" />  
  9. <meta name="description" content="" />  
  10. <link type="text/css" href="css/css.css" rel="stylesheet" />  
  11. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
  12. <script type="text/javascript">  
  13. //wirted by qq:190988779 at 2010-1-5 9:52:08   
  14. //可以配合jquery treeview使用效果很好。   
  15. $(document).ready(function(){   
  16. $(".content input[type='checkbox'][name='c']").click(function(){   
  17. //子目录   
  18. var c = $(this).parent().find("input");   
  19. var b = $(this).attr('checked');   
  20. c.each(function(){   
  21. $(this).attr('checked',b);   
  22. });   
  23. var m = $(this).parent().parent('ul').find('input');   
  24. var count = 0;   
  25. m.each(function(){   
  26. if($(this).attr('checked')){   
  27. count++;   
  28. }   
  29. });   
  30. //父目录   
  31. var p = $(this).parents('li');//父目录   
  32. p.each(function(){   
  33. var o = $(this).find('input');   
  34. if(count){   
  35. o[0].checked = true;   
  36. }else{   
  37. o[0].checked = !o[0].checked;   
  38. }   
  39. });   
  40. $(this).attr('checked',b);   
  41. });   
  42. });   
  43. </script>  
  44.   
  45. </head>  
  46. <body>  
  47. <div id="divMsg">&nbsp;</div>  
  48. <div class="content">  
  49. <h1>jquery treeview 的选中子目录，同时选中父目录，关联选择</h1>  
  50. <ul class="scrollBox">  
  51. <li><input type="checkbox" name="c" value=2 /><a href="#">2</a>  </li>  
  52. <li><input type="checkbox" name="c" value=3 /><a href="#">3</a>  
  53. <ul class="d">  
  54. <li><input type="checkbox" name="c" value=6 /><a href="#">6</a></li>  
  55. <li><input type="checkbox" name="c" value=5 /><a href="#">5</a>  
  56. <ul class="class100">  
  57. <li><input type="checkbox" name="c" value=111 /><a href="#">111</a></li>  
  58. <li><input type="checkbox" name="c" value=100 /><a href="#">100</a></li>  
  59. </ul>  
  60. </li>  
  61. </ul>  
  62. </li>  
  63. </ul>  
  64. <ul>  
  65. </ul>  
  66. </div>  
  67.   
  68. </body>  
  69. </html>  
<!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>
<title>jquery treeview 的选中子目录，同时选中父目录，关联选择</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link type="text/css" href="css/css.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//wirted by qq:190988779 at 2010-1-5 9:52:08
//可以配合jquery treeview使用效果很好。
$(document).ready(function(){
$(".content input[type='checkbox'][name='c']").click(function(){
//子目录
var c = $(this).parent().find("input");
var b = $(this).attr('checked');
c.each(function(){
$(this).attr('checked',b);
});
var m = $(this).parent().parent('ul').find('input');
var count = 0;
m.each(function(){
if($(this).attr('checked')){
count++;
}
});
//父目录
var p = $(this).parents('li');//父目录
p.each(function(){
var o = $(this).find('input');
if(count){
o[0].checked = true;
}else{
o[0].checked = !o[0].checked;
}
});
$(this).attr('checked',b);
});
});
</script>

</head>
<body>
<div id="divMsg">&nbsp;</div>
<div class="content">
<h1>jquery treeview 的选中子目录，同时选中父目录，关联选择</h1>
<ul class="scrollBox">
<li><input type="checkbox" name="c" value=2 /><a href="#">2</a>  </li>
<li><input type="checkbox" name="c" value=3 /><a href="#">3</a>
<ul class="d">
<li><input type="checkbox" name="c" value=6 /><a href="#">6</a></li>
<li><input type="checkbox" name="c" value=5 /><a href="#">5</a>
<ul class="class100">
<li><input type="checkbox" name="c" value=111 /><a href="#">111</a></li>
<li><input type="checkbox" name="c" value=100 /><a href="#">100</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
</ul>
</div>

</body>
</html>
 
Jsp代码   
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>   
  2. <%@ taglib prefix="s" uri="/struts-tags"%>   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
  4. <html>   
  5. <head>   
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
  7. <title>产品维度信息</title>   
  8. <% String path=request.getContextPath(); %>   
  9. <script language="javascript" src="<%=path%>/js/main.js"></script>   
  10. <script src="<%=path%>/js/dialog.js" type="text/javascript" charset="utf-8"></script>   
  11. <script type="text/javascript" src="<%=path%>/js/checkboxtree/jquery1.4.2.min.js"></script>   
  12.         <script type="text/javascript" src="<%=path%>/js/checkboxtree/jquery-ui1.8.0.min.js"></script>   
  13.         <link rel="stylesheet" type="text/css" href="<%=path%>/js/checkboxtree/demo.css">   
  14.         <link rel="stylesheet" type="text/css" href="<%=path%>/js/checkboxtree/jquery.checkboxtree.css">   
  15.         <script type="text/javascript" src="<%=path%>/js/checkboxtree/jquery.checkboxtree.js"></script>   
  16. <style type="text/css">   
  17. body{margin:0px;padding:0px;font-size:12px;}   
  18. #main{ margin-left:auto; margin-right:auto;}   
  19. #wrapper{margin:0px auto;width:520px;margin:10px;height:auto;}   
  20. </style>   
  21. <script type="text/javascript">   
  22. var closeFun = function(){   
  23.     parent.dhtmlwindow.closeDialog({   
  24.         success:true,returnValue:''  
  25.     });   
  26. };   
  27. function submints() {   
  28.     theForm.submit();   
  29.     //window.location.target="mainFrame"  
  30.     closeFun();   
  31. }   
  32. function goback(){   
  33.     parent.dhtmlwindow.closeDialog({   
  34.         success:false,returnValue:''  
  35.     });   
  36.     }      
  37. function select(sobj){   
  38.     $.ajax({   
  39.            type: "POST",   
  40.            url: "<%=path%>/cotton/productExtSelect.action",   
  41.            data: "stringArg="+$(sobj).val(),   
  42.            dataType:"json",   
  43.            success: function(data){   
  44.                $("input[name='list']").each(function(){   
  45.                    $(this).removeAttr("checked");   
  46.                    });   
  47.                $.each(data,function(idx,item){    
  48.                    $("input[name='list']").each(function(){   
  49.                         if($(this).val()==item.codeIdAndCodeName)   
  50.                         {   
  51.                              $(this).attr("checked",'true');   
  52.                         }   
  53.                     });   
  54.                    });    
  55.            }   
  56.         });    
  57. }   
  58. $(document).ready(function() {   
  59.     $('#tree').checkboxTree();   
  60. });   
  61. </script>   
  62. </head>   
  63.   
  64. <body>   
  65.  <div id="wrapper">   
  66.    <div id="main">   
  67.        <form action="<%=path%>/cotton/productExtSave.action" method="post" name="theForm">   
  68.      <div id="main_center">   
  69.      <table align="center" >   
  70.                  <tr>   
  71.               <td height="30" colspan="4" align="center">请 选 择 产 品 及 维 度 信 息</td>   
  72.             </tr>   
  73.             <tr>   
  74.               <td width="100" height="30" align="center">产品：</td>   
  75.               <td width="180" height="30"><div align="left"><strong>   
  76.                  <s:select name="stringArg" list="productCodeList" headerKey="" headerValue="请选择" listKey="productCode" listValue="productPyAndName" theme="simple" οnchange="javascript:select(this)"></s:select>   
  77.               </strong></div></td>   
  78.             </tr>   
  79.             <tr>   
  80.               <td width="46" align="center" valign="middle">维度：</td>   
  81.               <td colspan="3" align="left">   
  82.                 <ul id="tree">   
  83.                         <s:iterator value="codeList" status="index" var="ccode">   
  84.                             <li>   
  85.                                 <input type="checkbox" name="list" value="<s:property value="codeIdAndCodeName"/>"/><s:property value="codeName"/>   
  86.                                 <s:if test="childList!=null">   
  87.                                     <ul>   
  88.                                         <s:iterator value="childList" status="index2">   
  89.                                             <li>   
  90.                                                 <input type="checkbox" name="list" value="<s:property value="codeIdAndCodeName"/>"/><s:property value="codeName"/>   
  91.                                             </li>    
  92.                                         </s:iterator>   
  93.                                     </ul>   
  94.                                 </s:if>   
  95.                             </li>   
  96.                         </s:iterator>   
  97.                     </ul>   
  98.               </td>   
  99.             </tr>   
  100.          </table>   
  101.   
  102.       </div>   
  103.       <div class="btn_area" style="text-align:center;   
  104.                 margin-bottom:10px;">   
  105.                     <input type="button" οnclick="submints();" class="btn_bg3" name="btn_update" id="update" value="提交" />   
  106.                     <input type="button" οnclick="goback();" class="btn_bg3" name="btn_close" id="update" value="取消" />   
  107.                 </div>   
  108.              </form>             
  109.    </div>   
  110.  </div>   
  111. </body>   
  112. </html>  

 

   服务端代码：

 

Java代码   
  1. public void productExtSelect(){   
  2.     try {   
  3.         if(stringArg!=null){   
  4.             cproductExtExample.clear();   
  5.             cproductExtExample.createCriteria().andProductCodeEqualTo(stringArg);   
  6.             List<ProductExt> peList = cproductExtDao.selectByExample(cproductExtExample);   
  7.             JSONArray json = JSONArray.fromObject(peList);   
  8.             HttpServletResponse response = ServletActionContext.getResponse();   
  9.             response.setContentType("application/json;charset=UTF-8");   
  10.             response.setCharacterEncoding("utf-8");   
  11.             response.setHeader("Charset", "utf-8");   
  12.             response.setHeader("Cache-Control", "no-cache");   
  13.             response.getWriter().println(json.toString());   
  14.         }   
  15.     } catch (Exception e) {   
  16.         e.printStackTrace();   
  17.     }   
  18. }  

 

打包的例子在我的资源里：checkboxtree-0.3.1.rar

liguiping2000
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JQuery 实现简单的复选框树形结构图
随遇而安的博客
11-15 1万+
其实关于树形结构图，网上有很多插件，已经把全套的都封装好了的；但是最近公司需要做一个带复选框的树形结构，并且最关键的是要嵌入到JSP页面中，传递的数据不是用JSON传递的，是直接通过后端跳JSP页面的方式来的，所以就没有用网上的插件，就自己写了一下简单的实现。
jQuery的高性能TreeView源码(带CheckBox)
11-17
jQuery的高性能TreeView源码(带CheckBox) 1：支持静态的树，即一次性将全部数据加载到客户端。 2：异步树，即一次只加载一级或若干级节点，子节点可以异步加载数据。 3：Checkbox树（可能是静态树也可能是异步树），用于选择（如选择组织机构，选择数据字典项）等，最好是能够支持节点级联（这个是难点） 4：能够承载大数据量，并性能表现优异 5：能够在主流浏览器中运行良好
jquery Ztree3.5 radio/checkbox自定义树形
热门推荐
xulei_19850322的专栏
03-01 1万+
ztree 3.5提供了复选/单选树形，这里补充个单选/复选树形，在ztree3.5 demo上加到页面，纯属交流，废话结束，DEMO下载后打开dmo/cn下的index.html,在组合功能演示/radio_checkbox共存下看效果，下载地址： http://dl5.csdn.net/fd.php?i=603350980625868&s=826a4a285474d2372196962791
jQuery treetable 实现checkbox树，并能联动选择
sosohotsummer的专栏
01-09 4782
jQuery treetable插件地址：jQuery.treetable github项目地址：https://github.com/ludo/jquery-treetable 由于jQuery treetable只是实现了基本的树形table的数据展示功能，并没有提供诸如checkbox或者radio的形式，项目中需要使用，所以自己来实现，直接贴代码 &lt;html&gt; &lt;...
jquery ztree 在树节点后面加复选下拉框
xulei_19850322的专栏
03-04 8555
在ztree 3.5基础上改的，复选下拉框使用的multiselect,点击不同的父节点复选下拉框跟着移动,例子下载地址:http://dl5.csdn.net/fd.php?i=701151084502758&s=f142c8a2f4785f51f161a29dbfaa64c0,文件路径demo\cn\super\radio_checkbox_mulitselect.html,打开后组合功能演示
jquery.ztree增加checkbox选项（可选以及不可选）
weixin_34144848的博客
02-25 731
有一棵树，我们只需要其中几个节点可以通过勾选前面checkbox来对其进行操作，且这个操作需要动态执行。应该如何实现呢？ ==========》 面对这样一个需求，如果我们使用的是zTree树控件，那么将会变得非常地简单。 面对这样一个需求，如果我们使用的是zTree树控件，那么将会变得非常地简单。 1、引入ztree树相关的js文件 ...
jQuery 实现 checkbox的树形菜单结构（2）
csl0l0的专栏
02-10 1078
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="utf-8"&gt;    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;    &lt;title&gt;新
JQuery 简单的带复选框的树形结构
11-15
其实关于树形结构图，网上有很多插件，已经把全套的都封装好了的；但是最近公司需要做一个带复选框的树形结构，并且最关键的是要嵌入到JSP页面中，传递的数据不是用JSON传递的，是直接通过后端跳JSP页面的方式来的，所以就没有用网上的插件，就自己写了一下简单的实现。
jQuery复选框树形控件wdTree
dusea的博客
08-23 1276
 http://www.html580.com/9616 jQuery复选框树形控件wdTree http://www.html580.com/?E34MWihC 很有用的一个树控件
一种基于JQuery和json的带多选功能的树形菜单结构实现方式
海军航空兵司令的博客
09-28 1796
最近在工作中遇到的需求，管理系统中较为常见的场景，角色管理模块。通过可折叠、展开和全选功能的树形菜单来为管理系统中定义的角色分配可操作菜单的权限。 本文提供一种基于最基本的JQuery和json，对后端友好的树形菜单实现方案，主要思路是页面加载完毕时向后端发送ajax请求，后端将具有层级嵌套关系的bean转为json字符串返回给前端。ajax回调函数中先将返回的jso...
jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
unber的博客
05-10 237
easyui 的树（Tree）插件允许您创建一个复选框树。如果您点击一个节点的复选框，这个点击的节点信息将向上和向下继承。例如：点击 'tomato' 节点的复选框，您将会看见 'Vegetables' 节点现在仅仅选中部分。
jquery checkbox树
06-30
jquery 树形 checkbox jQuery(document).ready(function(){ jQuery(".mytree").checkboxTree({ collapsedarrow: "images/checkboxtree/img-arrow-collapsed.gif", expandedarrow: "images/checkboxtree/img-arrow-expanded.gif", blankarrow: "images/checkboxtree/img-arrow-blank.gif" }) })
jQuery_treetable实现checkbox树
01-09
jQuery_treetable实现checkbox树，实现多级联动，适用于权限树等各类需要树形结构数据的场景
JQuery实现简单的复选框树形结构图示例【附源码下载】
01-21
本文实例讲述了JQuery实现简单的复选框树形结构图。分享给大家供大家参考，具体如下： 这是自己写的简单树形结构图，实现的功能有： 1.最左边的按钮实现子目录的隐藏和显示 2.点击父节点的复选框选中后,父节点下的所有的子节点也选中；父节点未选中，则下面的所有的子节点也取消选中(全选和全不选) 3.选中一个子节点时相应的父节点也选中；当所有的子节点都没有选中时，父节点也取消选中 这是实现的最简单的功能。下面来具体的谈谈具体的实现： 1.引入库 所有的这些操作都是通过JQuery来实现的，所以首先要引入JQuery库，可以到官网下载JQuery库，也可以通过CDN的方式来引用，这里我是通过CDN
checkbox-tree:复选框树JQuery插件
06-12
自定义复选框树 JQuery 插件 入门 下载或。 在您的网页中： < script src =" dist/jquery.checkboxtree.js " > </ script > < script src =" dist/jquery.checkboxtree.min.js " > </ ...
Tree-checkbox:简单的复选框树
05-16
树形复选框简单的复选框树复选框树的实现。 示例文件夹中的说明性示例初始化 jQuery ( document ) . on ( 'ready' , function ( ) { new Tree ( ) ;} ) ; 订阅以更改树中复选框的状态 jQuery ( document ) . on ( '...
layui实现checkbox的目录树tree的例子
01-21
layui.use([ 'tree' ], function() { $ = layui.jquery; form = layui.form; //获取节点数据 getTreeData(); }); function getTreeData() { $.ajax({ url : path+/RoleController/getResourceTree.do, type : post, ...
jQuery高性能带复选框的树形结构插件
12-12
highchecktree是一款使用指定源数据生成带复选框的树形结构的jQuery插件。该树形结构插件对于在大数据的处理上性能十分出色。它使用懒加载的形式来提供性能，子节点会在点击时才去加载数据。
60道关于Redis的常见面试题.pdf
最新发布
04-18
- 1. 什么是 Redis？它的主要特点是什么？ - 2. Redis 支持哪些数据结构？请详细描述每种数据结构的用途和特点。 - 3. 什么是缓存穿透？在使用 Redis 时，如何防止缓存穿透？ - 4. 介绍 Redis 的持久化机制以及对比它们之间的区别。 - 5. 如何实现 Redis 的分布式锁？你了解的分布式锁有哪些实现方式？ - 6. Redis 的数据淘汰策略有哪些？分别是如何工作的？ - 7. 什么是 Redis 事务？它是如何实现的？与传统数据库事务有何不同？ - 8. 如何设置 Redis 的主从复制？主从复制有什么优势和限制？ - 9. Redis 支持的数据结构中，有哪些可以实现计数功能？请详细说明其使用场景。 - 10. 什么是 Redis Sentinel？它的作用是什么？如何配置和使用 Sentinel？
jquery 实现复选框单选
05-24
jQuery 实现复选框单选可以通过以下步骤实现： 1. 选中所有的复选框元素，并给它们添加一个 change 事件监听器。 2. 在事件处理程序中，遍历所有的复选框元素，如果某个复选框被选中，则将其他复选框的选中状态设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值