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. <ul id="tt2"></ul>
  156. </body>
  157. </html>

2、treeServer.jsp

    1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    2. <%
    3. 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#\"}]}]";
    4. String id = request.getParameter("id");
    5. //输出
    6. if (id!=null) {
    7. response.getWriter().write("[{\"text\":\"Languages\",\"state\":\"closed\",\"children\":[{\"text\":\"Java\"},{\"text\":\"C#\"}]}]");
    8. }else{
    9. response.getWriter().write(treeData);
    10. }
    11. %>

jquery-easyui-tree异步树的更多相关文章

  1. EasyUI tree 异步树与采用扁平化实现的同步树

    所谓好记性不如烂笔头,为了以防忘记,才写下这篇博客,废话不多.. 异步树: tips:   可以采用easyui里的原始数据格式,也可以采用扁平化的数据格式. 使用场景: 当菜单模块数量庞大或者无限极 ...

  2. jquery easyui tree异步加载子节点

    easyui中的树可以从标记中建立,也可以通过指定一个URL属性读取数据建立.如果想建立一棵异步树,需要为每个节点指定一个id属性值,这样在加载数据时会自动向后台传递id参数. <ul id=& ...

  3. Jquery easyui tree的使用

    这个ui用的一切都是json数据.树也是如此! 后台需要返回与格式匹配的json数据才能正确加载树. 页面定义一个ui: <ul id="messageInfoAddTree" ...

  4. 第二百二十七节，jQuery EasyUI，ComboTree(树型下拉框)组件

    jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个 ...

  5. Jquery easyui Tree的简单使用

    Jquery easyui Tree的简单使用 Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻 ...

  6. jquery easyui tree dialog

    <script type="text/javascript" src="<%=request.getContextPath()%>/include/ja ...

  7. Jquery EasyUI Tree .net实例

    图片: 针对tree: 数据库: CREATE TABLE [dbo].[SystemModel]( [Id] [,) NOT NULL, [Name] [nvarchar]() NULL, [Fat ...

  8. Jquery easyui tree 一些常见操作

    Tree: easyui tree的异步加载实现很简单,easyui的中文API文档中有实例(http://api.btboys.com/easyui/)——创建异步树形菜单,就是在tree node ...

  9. Jquery EasyUI Tree树形结构的Java实现（实体转换VO）

    前一阵做的OA项目,有一个是组织架构的树,因为是分开做的,我做的是Controller和页面,其他组做的Service和Dao,因为之前一直没有商量页面用什么框架做比较好,导致,Dao层取出来的数据都 ...

  10. jquery的tree table(树表)

    因项目需要,需要在表格中加入tree,使用了jquery的tree table,经美化,完美兼容各种框架的table: 请移步下载tree table 的js文件及css文件等,http://ludo ...

随机推荐

  1. java内存管理总结

    编译好的java程序需要运行在jvm中. 程序,无论是代码还是数据,都需要存储在内存中.JVM为java提供并管理所需要的内存空间. JVM内存分为堆.栈.方法区. 对象存储在堆中. This liv ...

  2. 浏览器 的 session 如何保持？！

    http://qindingsky.blog.163.com/blog/static/3122336200832853116360/ 在谈论session机制的时候,常常听到这样一种误解“只要关闭浏览 ...

  3. 关于session的小结

    session的原理 Session对象的原理在于,服务器可以为客户端创建并维护一个所谓的Session对象,用于存放数据. 在创建Session对象的同时,服务器将会为该Session对象产生一个唯 ...

  4. Node.js与Sails~Model数据模型

    回到目录 对于Sails来说,它的Model与数据库对应,不过它并没有采用目前比较流行的poco贫血模型,而是采用了类似DDD的充血模型,即它的数据实体里即有数据库字段(属性)而且还有方法,而模型里的 ...

  5. WebApi系列~实际项目中如何使用HttpClient向web api发异步Get和Post请求并且参数于具体实体类型

    回到目录 本讲比较实际,在WEB端有一个Index和Create方法,用来从web api显示实体列表数据和向api插入实体对象,这就是以往的网站,只不过是把数据持久化过程放到了web pai上面,它 ...

  6. PHP面向对象04_串行化

    oop04复习 2014-9-3 10:48:45 要点: --1.克隆对象 --2.__toString( ) --3. __call( ) --4.自动加载类 --5.对象串行化 1.克隆对象以及 ...

  7. Atitit 发帖机系列（7） 词法分析的方法attilax大总结）

    Atitit 发帖机系列(7) 词法分析的方法attilax大总结) 1.1. 词法分析貌似俩大方法,一个直接根据状态图转换,一个根据dfa1 1.2. switchcase或者ifelse 最原始方 ...

  8. Atitit java的异常exception 结构Throwable类

    Atitit java的异常exception 结构Throwable类 1.1. Throwable类 2.StackTrace栈轨迹1 1.2. 3.cause因由1 1.3. 4.Suppres ...

  9. 对于System.Net.Http的学习（三）——使用 HttpClient 检索与获取过程数据

    对于System.Net.Http的学习(一)——System.Net.Http 简介 对于System.Net.Http的学习(二)——使用 HttpClient 进行连接 如何使用 HttpCli ...

  10. Sublime Text配置Python开发利器

    Sublime Text配置Python开发利器 收好了 自动提示 jedi 代码格式化 Python PEP8 autoformat 如果还需要在shell中搞搞研究的话,ipython将是很好的选 ...