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. [ZigBee] 5、ZigBee基础实验——图文与代码详解定时器1（16位定时器）（长文）

    1.定时器1概述 定时器1 是一个支持典型的定时/计数功能的独立16 位定时器,支持输入捕获,输出比较和PWM等功能.定时器有五个独立的捕获/比较通道.每个通道定时器要使用一个I/O 引脚.定时器用于 ...

  2. 最全数据结构详述: List VS IEnumerable VS IQueryable VS ICollection VS IDictionary

    本文对常用的数据结构详述:Array, ArrayList,List,IList,ICollection, Stack, Queue, HashTable, Dictionary, IQueryabl ...

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

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

  4. RHCE 系列（九）：如何使用无客户端配置 Postfix

    转载于:http://www.itxuexiwang.com/a/liunxjishu/2016/0220/152.html?1456382561 尽管现在有很多在线联系方式,电子邮件仍然是一个人传递 ...

  5. MVVM架构~前台后台分离的思想与实践

    返回目录 MVVM是一种架构思想,是一种解决问题的方式,对于一个项目,一个功能模块,你可以选择使用MVVM的架构来实现,而knockoutjs只是实现MVVM的一种工具,它是在前端实现的,这一点,我们 ...

  6. GitHub & Bitbucket & GitLab & Coding 的对比分析

    目前基于 Git 做版本控制的代码托管平台有很多种,比较流行的服务有 Github.Bitbucket. GitLab. Coding,他们各自有什么特点,个人使用者和开发团队又该如何选择? 在这篇文 ...

  7. Masonry -- 使用纯代码进行iOS应用的autolayout自适应布局

    简介 简化iOS应用使用纯代码机型自适应布局的工作,使用一种简洁高效的语法替代NSLayoutConstraints. 项目主页: Masonry 最新示例: 点击下载 项目简议: 如果再看到关于纯代 ...

  8. Jenkins的系统设置

    1.登录Jenkins进入以下界面: 2.点击 系统管理 3.点击 系统设置 (下图的系统设置是已经设置好的) 4.这里设置主要设置 Jenkins URL (这里我是测试的所以使用默认的)与 邮件的 ...

  9. Android Studio 使用技巧

    1.导入Android Studio 工程的一些技巧 因为Gradle版本的问题,我们在使用AS导入工程的时候,经常会碰到本地没有该项目的Gradle版本,这时候AS就会去下载这个版本的Gradle, ...

  10. 每天一个linux命令（36）：diff 命令

    diff 命令是 linux上非常重要的工具,用于比较文件的内容,特别是比较两个版本不同的文件以找到改动的地方.diff在命令行中打印每一个行的改动.最新版本的diff还支持二进制文件.diff程序的 ...