• 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. %>  
  • 相关阅读:
    【原】费马小定理(Fermat little theorem)详解
    【原】水库抽样详解
    【原】模幂运算(Modular Exponentiation)算法
    【原】 POJ 3630 Phone List Trie树 解题报告
    【Joke】你可以去当程序员了
    【原】 POJ 3750 小孩报数问题 Joseph相关问题详解 解题报告
    【原】 POJ 3748 位操作 解题报告
    react 性能优化
    修改jsp文件，访问时没有变化。可能是修改了系统的时间，，，郁闷呢
    在Windows 7 下使用Visual Studio 2010 编写自动申请管理员权限运行的程序
  • 原文地址：https://www.cnblogs.com/yelanggu/p/5566513.html
Copyright © 2020-2023  润新知