jquery-easyui-tree异步树

Posted 野狼谷

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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. %>  

以上是关于jquery-easyui-tree异步树的主要内容，如果未能解决你的问题，请参考以下文章

Highcharts 基本曲线图；Highcharts 带有数据标签曲线图表；Highcharts 异步加载数据曲线图表

elementUI tree异步树拖拽问题

Jquery树控件ZTree异步加载

EasyUI 树菜单

使用 async.js 的异步树遍历

使用 async.js 的异步树遍历