EasyUI左侧tree，右侧tab布局

一个简单的页面布局，用的是EasyUI布局页面，左边是一个tree，右边是内容页面。把代码记录下来方面以后的查阅。

jsp页面

1. class="easyui-layout">
3. data-options="region:'north'" style="height:40px">

data-options="region:'west',title:'North',split:true" style="width:150px">

id="wst">

data-options="region:'center',title:'Center'" style="padding:5px">

id="tabs" class="easyui-tabs" data-options="fit:true, border:false">

JS代码

1. $(function() {
2. $("#wst").tree({
3. // 左侧tree部分的数据
4. url : "index.json",
5. onClick : function(node) {
6. openPage(node);
7. }
8. });
10. function openPage(node) {
11. // 检验是否存在tab,如果存在，则打开已有的
12. if ($("#tabs").tabs('exists', node.text)) {
13. $("#tabs").tabs('select', node.text);
14. } else {
15. // 如果没有此tab，创建一个新的tab
16. $("#tabs").tabs('add', {
17. title : node.text,
18. content : node.text,
19. closable : true
20. })
21. }
22. }
23. })

数据内容

1. [{
2. "id" : 1,
3. "text" : "Node 1",
4. "state" : "closed",
5. "children" : [{
6. "id" : 11,
7. "text" : "Node 11"
8. },{
9. "id" : 12,
10. "text" : "Node 12"
11. }]
12. },{
13. "id" : 2,
14. "text" : "Node 2",
15. "state" : "closed",
16. "children" : [{
17. "id" : 21,
18. "text" : "Node 21"
19. },{
20. "id" : 22,
21. "text" : "Node 22"
22. }]
23. },{
24. "id" : 3,
25. "text" : "Node 3"
26. }]

此时都是将内容写死，后面需要从数据中获取数据，再研究。