jquery 前端框架 easyUI-1.1.2_tree

介绍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"
	}]
}]



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lixp3

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值