创建异步树形菜单
- 创建树形菜单的ul标签
<ul class="easyui-tree" id="treeMenu">
</ul> - 写js代码,对菜单的ul标签元素使用tree函数
$(function(){
$('#treeMenu').tree({
url:'tree_data.json' //url的值是异步获取数据的页面地址
});
}); - 写用来异步获取数据的php页面(tree_data.json页面)。
返回的需是Json值(此处用数组代替从数据库获取的数据,以省略连接数据库过程)$result = []; //节点一
$prodArr = [
"id" => ,
"text" => "商品管理",
"state" => "open",
"children" => [
[
"id" => ,
"text" => "添加商品",
"state" => "open",
"attributes" => [
"url" => "http://abc.com/test.php"
]
],
[
"id" => ,
"text" => "修改商品",
"state" => "open",
"attributes" => [
"url" => "http://abc.com/test2.php"
]
]
]
]; //节点二
$newsArr = [
"id" => ,
"text" => "新闻管理",
"state" => "open",
"children" => [
[
"id" => ,
"text" => "添加新闻",
"state" => "open"
],
[
"id" => ,
"text" => "修改新闻",
"state" => "open"
]
]
]; //节点三
$userArr = [
"id" => ,
"text" => "用户管理",
"state" => "open",
"children" => [
[
"id" => ,
"text" => "添加用户",
"state" => "open"
],
[
"id" => ,
"text" => "修改用户",
"state" => "open"
]
]
]; Array_push($result, $prodArr, $newsArr, $userArr);
echo json_encode($result);说明:
节点的属性:
id:节点ID,可以作为参数来异步向页面地址获取子节点数据
text:节点文本
state:节点状态。取值为open(缺省默认值)或close。当设置为close时,会自动异步获取子节点的数据
checked:指明节点是否被选中。
attributes:自定义属性
children:以数组的形式包含子节点 (更多细节知识可查看easyui官网中tree知识点)
到这,异步树形菜单就完成了。
动态添加标签页tab
- 创建用来包裹标签页tab的外层标签
<div id="contentTabs" class="easyui-tabs" style="width:100%;height:100%;">
</div> - 在js中定义addTab函数
function addTab(title, url){
if ($('#contentTabs').tabs('exists', title)){
$('#contentTabs').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#contentTabs').tabs('add',{
title:title,
content:content,
closable:true
});
}
} - 在树形菜单的点击事件函数中调用addTab函数
$(function(){
$("#treeMenu").tree({
onClick:function(node){
if (node.attributes !== undefined && node.attributes.url !== undefined) {
addTab(node.text,node.attributes.url);
}
}
});
});
最后,如图显示