<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>树行菜单</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
<!--引入ztree-->
<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" />
<script type="text/javascript">
// 页面加载后执行
$(function(){
// 1、 进行ztree菜单设置
var setting = {
data: {
simpleData: {
enable: true // 支持简单json数据格式
}
}
};
//2,提供ztree属性菜单数据
var zNodes = [
{id=1,pid:0,name:"父节点一"},
{id=2,pid:0,name:"父节点二"},
{id=11,pid:1,name:"子节点一"},
{id=12,pid:1,name:"子节点二"},
{id=13,pid:2,name:"子节点三"},
{id=14,pid:2,name:"子节点四"}
];
//3,生成菜单.
$.fn.zTree.init($("#baseMenu"), setting, zNodes);
});
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'传智播客系统'" style="height: 100px;">北部地区</div>
<div data-options="region:'west',title:'菜单导航'" style="width: 180px;">
<!--折叠面板-->
<div class="easyui-accordion" data-options="fit:true">
<div data-options="title:'基础菜单'">
<!--通过ztree插件,制作树菜单-->
<ul id="baseMenu" class="ztree"></ul>
</div>
<div data-options="title:'系统菜单'">面板二</div>
</div>
</div>
<div data-options="region:'center'">
<!--选项卡面板-->
<div id="mytabs" class="easyui-tabs" data-options="fit:true">
<div data-options="title:'选项卡面板'">选项卡面板一</div>
<div data-options="title:'选项卡面板一'">选项卡面板二</div>
</div>
</div>
<div data-options="region:'east'" style="width: 80px;">东部地区</div>
<div data-options="region:'south'" style="height: 80px;">南部地区</div>
</body>
</html>
//2,提供ztree属性菜单数据这个地方看看错了没?
相关分类