jquery实现的简单复选树,checkboxtree

 

jquery的实现方式:

Html代码   
  1. >  
  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"> 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="#">2a>  li>  
  52. <li><input type="checkbox" name="c" value=3 /><a href="#">3a>  
  53. <ul class="d">  
  54. <li><input type="checkbox" name="c" value=6 /><a href="#">6a>li>  
  55. <li><input type="checkbox" name="c" value=5 /><a href="#">5a>  
  56. <ul class="class100">  
  57. <li><input type="checkbox" name="c" value=111 /><a href="#">111a>li>  
  58. <li><input type="checkbox" name="c" value=100 /><a href="#">100a>li>  
  59. ul>  
  60. li>  
  61. ul>  
  62. li>  
  63. ul>  
  64. <ul>  
  65. ul>  
  66. div>  
  67.   
  68. body>  
  69. html>  



jquery treeview 的选中子目录,同时选中父目录,关联选择











 

jquery treeview 的选中子目录,同时选中父目录,关联选择

 
Jsp代码   
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>   
  2. <%@ taglib prefix="s" uri="/struts-tags"%>   
  3. "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
  4.   
  5.   
  6. "Content-Type" content="text/html; charset=UTF-8">   
  7. 产品维度信息   
  8. <% String path=request.getContextPath(); %>   
  9. "javascript" src="<%=path%>/js/main.js">   
  10. "<%=path%>/js/dialog.js" type="text/javascript" charset="utf-8">   
  11. "text/javascript" src="<%=path%>/js/checkboxtree/jquery1.4.2.min.js">   
  12.         "text/javascript" src="<%=path%>/js/checkboxtree/jquery-ui1.8.0.min.js">   
  13.         "stylesheet" type="text/css" href="<%=path%>/js/checkboxtree/demo.css">   
  14.         "stylesheet" type="text/css" href="<%=path%>/js/checkboxtree/jquery.checkboxtree.css">   
  15.         "text/javascript" src="<%=path%>/js/checkboxtree/jquery.checkboxtree.js">   
  16. "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.   
  21. "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.   
  62.   
  63.   
  64.   
  65.  "wrapper">   
  66.    "main">   
  67.        "<%=path%>/cotton/productExtSave.action" method="post" name="theForm">   
  68.      "main_center">   
  69.      "center" >   
  70.                     
  71.               "30" colspan="4" align="center">请 选 择 产 品 及 维 度 信 息   
  72.                
  73.                
  74.               "100" height="30" align="center">产品:   
  75.               "180" height="30">"left">   
  76.                  "stringArg" list="productCodeList" headerKey="" headerValue="请选择" listKey="productCode" listValue="productPyAndName" theme="simple" οnchange="javascript:select(this)">   
  77.               
  
  •                
  •                
  •               "46" align="center" valign="middle">维度:   
  •               "3" align="left">   
  •                 "tree">   
  •                         "codeList" status="index" var="ccode">   
  •                             
  •   
  •                                 "checkbox" name="list" value="codeIdAndCodeName"/>"/>"codeName"/>   
  •                                 "childList!=null">   
  •                                     
        
    •                                         "childList" status="index2">   
    •                                             
    •   
    •                                                 "checkbox" name="list" value="codeIdAndCodeName"/>"/>"codeName"/>   
    •                                             
    •     
    •                                            
    •                                     
      
  •                                    
  •                             
  •   
  •                            
  •                        
  •                  
  •                
  •             
  •   
  •       
  •   
  •       "btn_area" style="text-align:center;   
  •                 margin-bottom:10px;">   
  •                     "button" οnclick="submints();" class="btn_bg3" name="btn_update" id="update" value="提交" />   
  •                     "button" οnclick="goback();" class="btn_bg3" name="btn_close" id="update" value="取消" />   
  •                 
  •   
  •                           
  •    
  •   
  •  
  •   
  •   
  •   
  •  

       服务端代码:

     

    Java代码   
    1. public void productExtSelect(){   
    2.     try {   
    3.         if(stringArg!=null){   
    4.             cproductExtExample.clear();   
    5.             cproductExtExample.createCriteria().andProductCodeEqualTo(stringArg);   
    6.             List 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

    你可能感兴趣的:(jquery)