jquery easyui tree

最新推荐文章于 2024-08-11 20:00:32 发布
最新推荐文章于 2024-08-11 20:00:32 发布
阅读量109 收藏
点赞数
分类专栏： jquery.easyui 文章标签： java c# javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cgl532056139/article/details/83968985
版权

用jsp做服务器做个简单的jqueryeasyui的异步树
1、html使用的是官方的demo里的tree.html
唯一修改的地方将url: 'tree_data.json' 修改为 url: 'treeServer.jsp',

Java代码 复制代码  收藏代码
  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="#" οnclick="reload()">reload</a>   
  143.         <a href="#" οnclick="getChildNodes()">getChildNodes</a>   
  144.         <a href="#" οnclick="getChecked()">getChecked</a>   
  145.         <a href="#" οnclick="getSelected()">getSelected</a>   
  146.         <a href="#" οnclick="collapse()">collapse</a>   
  147.         <a href="#" οnclick="expand()">expand</a>   
  148.         <a href="#" οnclick="collapseAll()">collapseAll</a>   
  149.         <a href="#" οnclick="expandAll()">expandAll</a>   
  150.         <a href="#" οnclick="append()">append</a>   
  151.         <a href="#" οnclick="remove()">remove</a>   
  152.         <a href="#" οnclick="update()">update</a>   
  153.         <a href="#" οnclick="isLeaf()">isLeaf</a>   
  154.     </div>   
  155.   
  156.     <ul id="tt2"></ul>   
  157. </body>   
  158. </html>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
	<link rel="stylesheet" type="text/css" href="/JQuery/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="/JQuery/js/easyui/themes/icon.css">
	<script type="text/javascript" src="/JQuery/js/easyui/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="/JQuery/js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#tt1').tree({
				animate:true,
				onClick:function(node){
					alert('you click '+node.text);
				}
			});
			$('#tt2').tree({
				checkbox: true,
				url: 'treeServer.jsp',
				onClick:function(node){
					alert('you click '+node.text);
				}
			});
		});
		function reload(){
			$('#tt2').tree('reload');
		}
		function getChildNodes(){
			var node = $('#tt2').tree('getSelected');
			if (node){
				var children = $('#tt2').tree('getChildNodes', node.target);
				var s = '';
				for(var i=0; i<children.length; i++){
					s += children[i].text + ',';
				}
				alert(s);
			}
		}
		function getChecked(){
			var nodes = $('#tt2').tree('getChecked');
			var s = '';
			for(var i=0; i<nodes.length; i++){
				if (s != '') s += ',';
				s += nodes[i].text;
			}
			alert(s);
		}
		function getSelected(){
			var node = $('#tt2').tree('getSelected');
			alert(node.text);
		}
		function collapse(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('collapse',node.target);
		}
		function expand(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('expand',node.target);
		}
		function collapseAll(){
			$('#tt2').tree('collapseAll');
		}
		function expandAll(){
			$('#tt2').tree('expandAll');
		}
		function append(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('append',{
				parent: node.target,
				data:[{
					text:'new1',
					checked:true
				},{
					text:'new2',
					state:'closed',
					children:[{
						text:'subnew1'
					},{
						text:'subnew2'
					}]
				}]
			});
		}
		function remove(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('remove', node.target);
		}
		function update(){
			var node = $('#tt2').tree('getSelected');
			if (node){
				node.text = '<span style="font-weight:bold">new text</span>';
				node.iconCls = 'icon-save';
				$('#tt2').tree('update', node);
			}
		}
		function isLeaf(){
			var node = $('#tt2').tree('getSelected');
			var b = $('#tt2').tree('isLeaf', node.target);
			alert(b)
		}
	</script>
</head>
<body>
	<h1>Tree</h1>
	<p>Create from HTML markup</p>
	<ul id="tt1">
		<li>
			<span>Folder</span>
			<ul>
				<li>
					<span>Sub Folder 1</span>
					<ul>
						<li>
							<span><a href="#">File 11</a></span>
						</li>
						<li>
							<span>File 12</span>
						</li>
						<li>
							<span>File 13</span>
						</li>
					</ul>
				</li>
				<li>
					<span>File 2</span>
				</li>
				<li>
					<span>File 3</span>
				</li>
				<li>File 4</li>
				<li>File 5</li>
			</ul>
		</li>
		<li>
			<span>File21</span>
		</li>
	</ul>
	<hr></hr>
	<p>Create from JSON data</p>
	<div style="margin:10px;">
		<a href="#" οnclick="reload()">reload</a>
		<a href="#" οnclick="getChildNodes()">getChildNodes</a>
		<a href="#" οnclick="getChecked()">getChecked</a>
		<a href="#" οnclick="getSelected()">getSelected</a>
		<a href="#" οnclick="collapse()">collapse</a>
		<a href="#" οnclick="expand()">expand</a>
		<a href="#" οnclick="collapseAll()">collapseAll</a>
		<a href="#" οnclick="expandAll()">expandAll</a>
		<a href="#" οnclick="append()">append</a>
		<a href="#" οnclick="remove()">remove</a>
		<a href="#" οnclick="update()">update</a>
		<a href="#" οnclick="isLeaf()">isLeaf</a>
	</div>

	<ul id="tt2"></ul>
</body>
</html>



2、treeServer.jsp

Java代码 复制代码  收藏代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>   
  2. <%   
  3.   
  4.  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#\"}]}]";   
  5.   
  6. String id = request.getParameter("id");   
  7. //输出   
  8. if (id!=null) {   
  9.     response.getWriter().write("[{\"text\":\"Languages\",\"state\":\"closed\",\"children\":[{\"text\":\"Java\"},{\"text\":\"C#\"}]}]");   
  10. }else{   
  11.     response.getWriter().write(treeData);   
  12. }   
  13. %>  
cgl532056139
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery EasyUI tree增加搜索功能的实现方法
10-19
【jQuery EasyUI tree增加搜索功能】在Web开发中，jQuery EasyUI是一个基于jQuery的UI库，提供了丰富的组件，包括我们提到的tree组件。这个组件用于展示层级结构的数据，但默认情况下，它并不直接支持搜索功能。为了...
Jquery easyui Tree的简单使用
weixin_34097242的博客
06-16 99
Jquery easyui Tree的简单使用 Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 Jquery easyui 官...
JQuery EasyUI Tree和tab右键菜单实现
admin18511385056的博客
04-03 188
$(function(){//动态菜单数据vartreeData=[{text:"菜单",children:[{text:"一级菜单1",attributes:{url...
easyui树结构
Monstar_hu的博客
08-16 367
&lt;%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dt
随笔-jquery easyUI tree的使用
weixin_34232744的博客
01-01 91
通过tree完成权限菜单的显示；权限菜单（根）-用户管理（二级），岗位管理（二级），资源管理（二级）；用户管理-普通用户管理（叶子），高级用户管理（叶子）；岗位管理-岗位管理1（叶子），岗位管理2（叶子），岗位管理3（叶子）；资源管理-资源管理1（叶子），资源管理2（叶子），资源管理3（叶子）；建立一个满足tree json树控件数据格式化每个节点都具备以下属性：id：节点I...
JQuery Easyui Tree的oncheck事件实现代码
10-29
在使用JQuery Easyui Tree组件时，我们常常需要监听用户对树形结构中节点的交互行为，例如当用户点击复选框时触发特定的操作。然而，Easyui Tree的API默认只提供了`onClick`事件，这对于处理复选框的选中状态并不...
jQuery EasyUI tree 使用拖拽时遇到的错误小结
10-21
在我使用tree拖拽时总是失败，控制台输出了很多错误。经过问题跟踪分析最终找到的错误原因，下面小编给大家分享下，感兴趣的朋友参考下
解析jquery easyui tree异步加载子节点问题
10-20
本篇文章主要介绍解析jquery easyui tree异步加载子节点问题，easyui中的树可以从标记中建立，也可以通过指定一个URL属性读取数据建立，有兴趣的可以了解一下。
easyui选项卡
q974964364的博客
09-21 193
$(function(){ $('#tt').tabs({         border:true,         tools:[{ iconCls:'icon-add', handler:function(){ $('#tt').tabs('add',{         title:'New Tab',         content:'Tab Body',        
jqueryEasyUI treegrid简单实现
淡定，情绪
12-23 124
导入easyUi的工具包 在jsp页面引入 &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Client Side Pagination in TreeGrid - jQuery EasyUI Demo&lt;/title&gt; ...
04 jquery easyui 之 Tree
weixin_34376562的博客
12-15 80
树（Tree）可以在一个空的 <ul> 元素中定义，可使用 javascript 加载数据。在body中添加ul标签<ulid="tt"></ul>然后在使用javascript代码加载数据使用JSON加载数据$('#tt').tree({url:'treedata.json'});树的数据格式（Tree Data Format）每个节...
jQuery EasyUI API 中文文档 - 标签页/选项卡（Tabs）
weixin_30412167的博客
09-30 107
Tabs 标签页/选项卡 风流涕淌翻译。不当之处，敬请指正。转载请保留出处！ 用$.fn.tabs.defaults重写defaults。 依赖 panellinkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易，我们不需要写任何JavaScript代码。记住把 'easyui-tabs' 类添加到<div/>...
Jquery easyui tree 一些常见操作
programloverjack的专栏
04-06 131
遍历tree nodes function Travel(treeID){//参数为树的ID，注意不要添加#   var roots=$('#'+treeID).tree('getRoots'),children,i,j;   for(i=0;i&lt;roots.length;i++){     alert(roots[i].text);     children=$('#'+treeID...
Jquery EasyUI 使用tree（树形图） 和 tabs（选项卡）
junyi0107的博客
11-28 1735
首先进行jquery 和EasyUI所需要的文件 在jsp页面中进行导入 <head> <link rel="stylesheet" type="text/css" href="res/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="res/themes/icon.css"> <script
基于JQUERY的7款选项卡(TABS)实例
旺仔专栏
04-25 1345
1. jQuery 选项卡界面 / 选项卡结构菜单教程 这种类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此演示哟，你一定会喜欢上它的。 演示 | 下载 | 介绍2. jQuery目录导航插件 这个jQuery插件为我们提供了添加基于字母顺序的导航小部件到有序和无序列表的方法
ztree树形菜单与jQuery EasyUI的选项卡tabs结合使用
public_sbw的博客
03-26 866
&lt;script type="text/javascript"&gt; $(function(){ //1.设置ztree菜单 var setting={ data:{ simpleData:{ enable:true //简单json数据格式 } }, callback : { onClick : function(ev...
SpringBoot快速入门（手动创建）
最新发布
m0_74124657的博客
08-11 272
代码如下//引导类项目的入口//注解添加导入进来你可以浏览器中查看自己编写的代码，看是否正确localhost：你命名的端口号（默认是8080。后面你也可以在配置文件修改）
springboot民办高校科研项目管理系统-计算机毕业设计源码54009
VX_DZbishe的博客
08-11 294
论文主要是对基于springboot的民办高校科研项目管理系统进行了介绍，包括研究的现状，还有涉及的开发背景，然后还对系统的设计目标进行了论述，还有系统的需求以及整个的设计方案，对系统的设计以及实现，也都论述的比较细致，最后对基于springboot的民办高校科研项目管理系统进行了一些具体测试。本次报告，首先分析了研究的背景、作用、意义，为研究工作的合理性打下了基础。
jquery easyui tree组件去掉默认的图标
06-10
可以通过设置 `iconCls: null` 来去掉 `tree` 组件默认的图标。具体的实现方法如下所示： ```javascript $('#tree').tree({ data: [...], lines: true, onLoadSuccess: function(node, data) { // 遍历所有节点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值