EasyUI左侧tree，右侧tab布局

165 阅读 0 评论 109 点赞

我是靠谱客的博主动人口红，这篇文章主要介绍EasyUI左侧tree，右侧tab布局，现在分享给大家，希望可以做个参考。

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

jsp页面

 <body class="easyui-layout">

<!-- 左边树形布局 -->

<div data-options="region:'north'" style="height:40px"></div>

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

<ul id="wst"></ul>

</div>

<!-- 右边显示内容 -->

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

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

</div>
</body>

JS代码

 $(function() {

$("#wst").tree({

// 左侧tree部分的数据

url : "index.json",

onClick : function(node) {

openPage(node);

}

});

function openPage(node) {

// 检验是否存在tab,如果存在，则打开已有的

if ($("#tabs").tabs('exists', node.text)) {

$("#tabs").tabs('select', node.text);

} else {

// 如果没有此tab，创建一个新的tab

$("#tabs").tabs('add', {

title : node.text,

content : node.text,

closable : true

})

}

}
})

数据内容

 [{

"id" : 1,

"text" : "Node 1",

"state" : "closed",

"children" : [{

"id" : 11,

"text" : "Node 11"

},{

"id" : 12,

"text" : "Node 12"

}]
},{

"id" : 2,

"text" : "Node 2",

"state" : "closed",

"children" : [{

"id" : 21,

"text" : "Node 21"

},{

"id" : 22,

"text" : "Node 22"

}]
},{

"id" : 3,

"text" : "Node 3"
}]