jquery 前端框架 easyUI-1.1.2_tree_easyui 树 1.1.-优快云博客

本文链接：https://blog.youkuaiyun.com/lxp1021/article/details/6597735

介绍AIUESuiteV1.0的研发背景及特点，该产品基于jquery框架进行模块化与组件化改造，旨在改善用户体验并适配企业级APP开发需求。文章详细解析了easyUI中树形组件（Tree）的两种实现方式及其应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这段时间一直在忙公用研发中心AIUESuite V1.0的研发工作，AIUESuite V1.0是基于现在比较流行的开源框架jquery的基础上进行模块化，组件化二次封转的产品，应该说也是我这几年对企业级APP前端研发的经验也技术的一次集中的体现，让用户能够在用户体验的有很好的提升，应该说它比jqury更贴近产品，更适用与企业级APP的研发。也是希望自己的这个产品能够在4条产品线下都能够得到广范的使用和推广。

今天有一个业务场景需要通过Tree,layout,tabs共同作用实现，所以也是把easyui的一些使用心得，也源码做一次集中的积累，一是，加深印象，二是，便于以后使用的时候方便查找

一.tree篇

在easyUi里实现tree的有两种方法，一种是直接写在静态页面里的，这种适用于树层级比较少，比较简单的树结构，另一种是使用异步数据动态的创建tree，比较常用的是用json格式的数据结构

1.静态html

<ul id="menuTree" class="easyui-tree" animate="true">  
          <li>  
    <span>所有菜单</span>  
    <ul>  
         <li state="closed">  
               <span>Sub Folder 1</span>  
               <ul>  
        <li><span><a href="#">预约登记</a></span></li>  
        <li>  
                                    <span>预约周期</span>  
        </li></ul>  
                    </li>  
               </ul>  
         <li>  
</ul>

方法：给<ul>加一个class的类名

easyui-tree

2.使用异步数据动态的创建tree,这里的文件格式是json格式

$('#AIUETree').tree({
			url: 'AIUEtree_data.json',
			dnd: true,
			onClick:function(node){ //onClick:鼠标点击事件
			  //$(this).tree('toggle', node.target);
			 // alert('you dbclick '+node.text);
			  //alert('you dbclick '+node.attributes.href);
			  $.AIUETree.addTabs(node.text,node.attributes.href); //$.AIUETree.addTabs为执行的方法
			}
		});

3.json格式的数据

[{
	"id":1,
	"text":"UI Samples",
	"iconCls":"icon-ok",
	"children":[{
		"id":2,
		"text":"AI-layout",
		"checked":true,
		"attributes":{"href":"AIUE_layout.html"}
		
	},{
		"id":3,
		"text":"AI-tree",
		"state":"open",
		"attributes":{"href":"AIUE_tree.html"}
	},{
		"id":4,
		"text":"AI-button",
		"state":"open"
	},{
		"id":5,
		"text":"AI-forms",
		"state":"open"
	},{
		"id":6,
		"text":"AI-combobox",
		"state":"open"
	},{
		"id":7,
		"text":"AI-valueDatebox",
		"state":"open"
	}]
}]