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. [专业名词·硬件] 2、DC\DC、LDO电源稳压基本常识（包含基本原理、高效率模块设计、常见问题、基于nRF51822电源管理模块分析等）·长文

    综述先看这里 第一节的1.1简单介绍了DC/DC是什么: 第二节是关于DC/DC的常见的疑问答疑,非常实用: 第三节是针对nRF51822这款芯片电源管理部分的DC/DC.LDO.1.8的详细分析,对 ...

  2. Open Source Cassandra Gitbook for Developer

    Just released an open source Cassandra Gitbook for developer. http://teddymaef.github.io/learncassan ...

  3. Senparc.Weixin.MP SDK 微信公众平台开发教程（九）：自定义菜单接口说明

    上一篇<Senparc.Weixin.MP SDK 微信公众平台开发教程(八):通用接口说明>介绍了如何通过通用接口获取AccessToken,有了AccessToken,我们就可以来操作 ...

  4. 为什么eclipse中启动tomcat后，浏览器中出现404?

    问题描述: tomcat压缩包加压后,启动lib文件夹下面的startup.bat,在浏览器中输入http://localhost:8080/后出现熟悉的界面. 但是在eclipse中,jsp可以正常 ...

  5. Java程序员的日常 —— 注册工厂的妙用

    注册工厂是一种很常用的框架书写方法,它适合于快速创建相同类型的对象. 举个栗子 比如一个家具工厂,有沙发.椅子.茶几等等,正常的编程模式是这样的: //创建 class 沙发{} class 椅子{} ...

  6. lua的io操作文档

    2014-09-16~15:26:35 I/O库提供两种不同的方式进行文件处理1.io表调用方式:使用io表,io.open将返回指定文件的描述,并且所有的操作将围绕这个文件描述 io表同样提供三种预 ...

  7. [C#基础]基础知识一: 面向对象的基本知识.

    激励自己有时间多看看.!! C#基础共分为七个部分: 一: 面向对象 二: 值类型, 引用类型, 字符串操作 三: 集合文件操作 四: 正则表达式 五: XML操作 六: 委托, 事件 七: 反射 1 ...

  8. PHP 环境塔建

    快速搭建环境可用软件 每种语言的第一步都是要先搭建环境 WAMP(windows系统下搭建php开发环境): APPSERVER L(Linux)A(Apache)M(Mysql)P(Php)架构 P ...

  9. 每天一个linux命令(12)：more命令

    more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b 键就会 ...

  10. Codeforces Round #380 (Div. 2) 总结分享

    B. Spotlights 题意 有n×m个格子的矩形舞台,每个格子里面可以安排一个演员或聚光灯,聚光灯仅可照射一个方向(俯视,上下左右).若聚光灯能照到演员,则称为"good positi ...