jquery-easyui-tree异步树

Java代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>jQuery EasyUI</title>  
  6.     <link rel="stylesheet" type="text/css" href="/JQuery/js/easyui/themes/default/easyui.css">  
  7.     <link rel="stylesheet" type="text/css" href="/JQuery/js/easyui/themes/icon.css">  
  8.     <script type="text/javascript" src="/JQuery/js/easyui/jquery-1.4.2.min.js"></script>  
  9.     <script type="text/javascript" src="/JQuery/js/easyui/jquery.easyui.min.js"></script>  
  10.     <script type="text/javascript">  
  11.         $(function(){  
  12.             $('#tt1').tree({  
  13.                 animate:true,  
  14.                 onClick:function(node){  
  15.                     alert('you click '+node.text);  
  16.                 }  
  17.             });  
  18.             $('#tt2').tree({  
  19.                 checkbox: true,  
  20.                 url: 'treeServer.jsp',  
  21.                 onClick:function(node){  
  22.                     alert('you click '+node.text);  
  23.                 }  
  24.             });  
  25.         });  
  26.         function reload(){  
  27.             $('#tt2').tree('reload');  
  28.         }  
  29.         function getChildNodes(){  
  30.             var node = $('#tt2').tree('getSelected');  
  31.             if (node){  
  32.                 var children = $('#tt2').tree('getChildNodes', node.target);  
  33.                 var s = '';  
  34.                 for(var i=0; i<children.length; i++){  
  35.                     s += children[i].text + ',';  
  36.                 }  
  37.                 alert(s);  
  38.             }  
  39.         }  
  40.         function getChecked(){  
  41.             var nodes = $('#tt2').tree('getChecked');  
  42.             var s = '';  
  43.             for(var i=0; i<nodes.length; i++){  
  44.                 if (s != '') s += ',';  
  45.                 s += nodes[i].text;  
  46.             }  
  47.             alert(s);  
  48.         }  
  49.         function getSelected(){  
  50.             var node = $('#tt2').tree('getSelected');  
  51.             alert(node.text);  
  52.         }  
  53.         function collapse(){  
  54.             var node = $('#tt2').tree('getSelected');  
  55.             $('#tt2').tree('collapse',node.target);  
  56.         }  
  57.         function expand(){  
  58.             var node = $('#tt2').tree('getSelected');  
  59.             $('#tt2').tree('expand',node.target);  
  60.         }  
  61.         function collapseAll(){  
  62.             $('#tt2').tree('collapseAll');  
  63.         }  
  64.         function expandAll(){  
  65.             $('#tt2').tree('expandAll');  
  66.         }  
  67.         function append(){  
  68.             var node = $('#tt2').tree('getSelected');  
  69.             $('#tt2').tree('append',{  
  70.                 parent: node.target,  
  71.                 data:[{  
  72.                     text:'new1',  
  73.                     checked:true  
  74.                 },{  
  75.                     text:'new2',  
  76.                     state:'closed',  
  77.                     children:[{  
  78.                         text:'subnew1'  
  79.                     },{  
  80.                         text:'subnew2'  
  81.                     }]  
  82.                 }]  
  83.             });  
  84.         }  
  85.         function remove(){  
  86.             var node = $('#tt2').tree('getSelected');  
  87.             $('#tt2').tree('remove', node.target);  
  88.         }  
  89.         function update(){  
  90.             var node = $('#tt2').tree('getSelected');  
  91.             if (node){  
  92.                 node.text = '<span style="font-weight:bold">new text</span>';  
  93.                 node.iconCls = 'icon-save';  
  94.                 $('#tt2').tree('update', node);  
  95.             }  
  96.         }  
  97.         function isLeaf(){  
  98.             var node = $('#tt2').tree('getSelected');  
  99.             var b = $('#tt2').tree('isLeaf', node.target);  
  100.             alert(b)  
  101.         }  
  102.     </script>  
  103. </head>  
  104. <body>  
  105.     <h1>Tree</h1>  
  106.     <p>Create from HTML markup</p>  
  107.     <ul id="tt1">  
  108.         <li>  
  109.             <span>Folder</span>  
  110.             <ul>  
  111.                 <li>  
  112.                     <span>Sub Folder 1</span>  
  113.                     <ul>  
  114.                         <li>  
  115.                             <span><a href="#">File 11</a></span>  
  116.                         </li>  
  117.                         <li>  
  118.                             <span>File 12</span>  
  119.                         </li>  
  120.                         <li>  
  121.                             <span>File 13</span>  
  122.                         </li>  
  123.                     </ul>  
  124.                 </li>  
  125.                 <li>  
  126.                     <span>File 2</span>  
  127.                 </li>  
  128.                 <li>  
  129.                     <span>File 3</span>  
  130.                 </li>  
  131.                 <li>File 4</li>  
  132.                 <li>File 5</li>  
  133.             </ul>  
  134.         </li>  
  135.         <li>  
  136.             <span>File21</span>  
  137.         </li>  
  138.     </ul>  
  139.     <hr></hr>  
  140.     <p>Create from JSON data</p>  
  141.     <div style="margin:10px;">  
  142.         <a href="#" onclick="reload()">reload</a>  
  143.         <a href="#" onclick="getChildNodes()">getChildNodes</a>  
  144.         <a href="#" onclick="getChecked()">getChecked</a>  
  145.         <a href="#" onclick="getSelected()">getSelected</a>  
  146.         <a href="#" onclick="collapse()">collapse</a>  
  147.         <a href="#" onclick="expand()">expand</a>  
  148.         <a href="#" onclick="collapseAll()">collapseAll</a>  
  149.         <a href="#" onclick="expandAll()">expandAll</a>  
  150.         <a href="#" onclick="append()">append</a>  
  151.         <a href="#" onclick="remove()">remove</a>  
  152.         <a href="#" onclick="update()">update</a>  
  153.         <a href="#" onclick="isLeaf()">isLeaf</a>  
  154.     </div>  
  155.   
  156.     <ul id="tt2"></ul>  
  157. </body>  
  158. </html>  



2、treeServer.jsp 

Java代码  收藏代码
    1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
    2. <%  
    3.   
    4.  String treeData="[{"id":1,"text":"Folder1","iconCls":"icon-ok","children":[{"id":2,"text":"File1","checked":true},{"id":3,"text":"Folder2","state":"open","children":[{"id":4,"text":"File3","checked":true,"iconCls":"icon-reload"},{"id": 8,"text":"Async Folder","state":"closed"}]}]},{"text":"Languages","state":"closed","children":[{"text":"Java"},{"text":"C#"}]}]";  
    5.   
    6. String id = request.getParameter("id");  
    7. //输出  
    8. if (id!=null) {  
    9.     response.getWriter().write("[{"text":"Languages","state":"closed","children":[{"text":"Java"},{"text":"C#"}]}]");  
    10. }else{  
    11.     response.getWriter().write(treeData);  
    12. }  
    13. %>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yelanggu/p/5566513.html