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. css position全解析

    1.position:static 所有的元素的默认定位都是position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置. 2.position:relative 如果设定 ...

  2. 自制操作系统（七） 加快中断处理，和加入FIFO缓冲区

    参考书籍<30天自制操作系统>.<自己动手写操作系统> 2016-05-26.2016-07-09 主要是加快中断处理,和加入FIFO缓冲区. 因为之前是将打印字符的代码放在了 ...

  3. Mybatis文档阅读笔记（明日继续更新...）

    今天在编写mybatis的mapper.xml时,发现对sql的配置还不是很熟,有很多一坨一坨的东西,其实是可以抽取成服用的.不过良好的组织代码,还是更重要的.

  4. Gridview转发

    首页 开源项目 问答 动弹 博客 翻译 资讯 专题 城市圈 [ 登录 | 注册 ] 博客专区 > Reya滴水心的博客详情 Asp.net中GridView使用详解(很全,很经典) Reya滴水 ...

  5. iOS开发——UI精选OC篇&UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍

    UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍 一:UIApplication:单例(关于单例后面的文章中会详细介绍,你现在只要知道 ...

  6. LLBL Gen + Entity Framework 程序设计入门

    Entity Framework推出有好几年,除了微软的Visual Studio可以做实体框架开发外,第三方的开发工具如LLBL Gen, Devart Entity Developer也可以用来做 ...

  7. javascript类型系统——布尔Boolean类型

    × 目录 [1]定义 [2]应用场景 [3]转为布尔[4]实例方法 前面的话 布尔值Boolean类型可能是三种包装对象Number.String和Boolean中最简单的一种.Number和Stri ...

  8. ASP.NET MVC 4中如何为不同的浏览器自适应布局和视图

    在ASP.NET MVC 4中,可以很简单地实现针对不同的浏览器自适应布局和视图.这个得归功于MVC中的"约定甚于配置"的设计理念. 默认的自适应 MVC 4自动地为移动设备浏览器 ...

  9. 工作单元模式(UnitOfWork)学习总结

    工作单元的目标是维护变化的对象列表.使用IUnitOfWorkRepository负责对象的持久化,使用IUnitOfWork收集变化的对象,并将变化的对象放到各自的增删改列表中, 最后Commit, ...

  10. HTML5的学习--performance

    HTML5提供的performance接口精确的告诉我们当访问一个网站页面时当前网页每个处理阶段的精确时间(timestamp),以方便我们进行前端分析. 它是浏览器的直接实现,比在网页中用js设置D ...