<!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属性菜单数据这个地方看看错了没?
添加回答
举报
0/150
提交
取消