这段时间一直在忙公用研发中心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"
}]
}]