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. 自定义 Azure Table storage 查询过滤条件

    本文是在Azure Table storage 基本用法一文的基础上,介绍如何自定义 Azure Table storage 的查询过滤条件.如果您还不太清楚 Azure Table storage ...

  2. ssl小结

    有几篇不错的文章: http://www.cnblogs.com/pen-ink/archive/2011/01/17/1937680.html 这个应该是最简单的示例了. 不过,当两个passwor ...

  3. EF架构~关于多对多关系表无法更新与插入的问题

    回到目录 在EF里,我们设计模型时,会设计到多对多关系,在EF里会把这种关系会转成两个一对多的关系表,这是比较友好的,因为多对多来说,对于业务本身没什么意思,所以隐藏了,没什么坏处,但对于这个隐藏来说 ...

  4. Atitit 编程语言原理与概论attilax总结 三大书籍总结

    Atitit 编程语言原理与概论attilax总结 三大书籍总结 编程语言原理(第10版) 目录: 第1章 预备知识第2章 主要程序设计语言的发展第3章 描述语法和语义第4章 词法分析和语法分析第5章 ...

  5. css_04之显示、定位

    1.显示方式:display:取值:none(隐藏,不占页面空间,脱离文档流)/block(元素变为块级)/inline(元素变为行内)/inline-block(元素变为行内块): 2.显示效果:v ...

  6. java虚拟机内存区域的划分以及作用详解

    序言 为什么有时候学着学着会突然之间觉得一切度是那么无趣,男的每个月也有那么几天难道?哈哈,不然是什么,我还是要坚持,可以做少一点,但是不能什么度不做.总会过去的,加油 --WH 一.运行时数据区 什 ...

  7. SSIS 对数据排序

    SSIS 对数据排序有两种方式,一种是使用Sort组件,一种是使用sql command的order by clause进行排序. 一,使用Sort组件进行排序 SortType:升序 ascendi ...

  8. 利用border属性制作各种图形。

    这是一个比较正常的 但如果我们把宽度和高度去掉呢? 好像看不太出来对吧,我们来给边框加上不同颜色. 看出啥了没,分明就是每个边都是一个三角形啊. 那假如我想要一个朝下的三角形是不是我只要把border ...

  9. LVS负载平衡集群（没成型）

    LVS:可以实现高可用的.可伸缩的Web.Mail.Cache和Media等网络服务,实现一个可高用.高性能.低成本的服务器应用软件 LVS集群组成: 前端:负载均衡层 --由一台或多台负载调度器构成 ...

  10. 浏览器端获取局域网IP地址，本机的MAC，以及机器名

    原文链接:http://www.orlion.ga/59/ 只针对IE且客户端的IE允许AcitiveX运行 code: <html> <head> <title> ...