1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3
4 <%@ include file="/common/page.jsp" %> // 这里是引用的公共代码 ，主要是css和js jstl 的引用 easyui核心js都在里面
5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
6 <html>
7 <head>
8 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
9 <link rel="stylesheet" href="${pageContext.request.contextPath }/ztree/css/demo.css" type="text/css">
10 <link rel="stylesheet" href="${pageContext.request.contextPath }/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
11 <script type="text/javascript" src="${pageContext.request.contextPath }/ztree/js/jquery.ztree.core.js"></script>
12 <style type="text/css">
13 *{
14 margin: 0 0 ;
15 }
16 </style>
28
29 <title>Insert title here</title>
30 </head>
31 <body class="easyui-layout">
32
33 <div data-options="region:‘north‘,border:false" style="height:60px;background:#B3DFDA;padding:10px">
34 <h3>xxx 系统</h3>
35 </div>
36 <!-- collapsible 是否显示 可折叠按钮 -->
37 <div id="west" data-options="region:‘west‘,split:false,title:‘West‘,collapsible:true" style="width:150px;padding:10px;">
38
39 <div id="treeDemo" class="ztree"></div>
40
41 </div>
42 <div data-options="region:‘south‘,border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
43 <div data-options="region:‘center‘,title:‘Center‘" id="center" > //这里是使用easyui 的tabs标签， 每次点击树形菜单（ztree），使用tabs创建一个标签
44 <div id="tt" class="easyui-tabs" style="width: 100%;height: 100%;">
53 </div>
54
55 </body>
56
57 <script type="text/javascript">
58
59 /* $(‘#tt‘).tabs({
60 border:false,
61 onSelect:function(title){
62 alert(title+‘ is selected‘);
63 }
64 });
65
66 function addNode() {
67 $("#tt").append("<div title=‘Tab4‘ data-options=‘closable:true‘style=‘overflow:auto;padding: 20px;‘>这里有个添加问题啊啊啊 </div>");
68 }
69 */
70
71 function addTab(title, url){
72 if ($(‘#tt‘).tabs(‘exists‘,title)){
73 $(‘#tt‘).tabs(‘select‘,title);
74 } else {
75 var content = ‘<iframe scrolling="auto" frameborder="0" src="‘+url+‘" style="width:100%;height:100%;"></iframe>‘;
76 $(‘#tt‘).tabs(‘add‘,{
77 title:title,
78 content:content,
79 closable:true,
80 tools:[{
81
82 }]
83 });
84 }
85 } //ztree的callback 调用的方法
86 function openTab(event, treeId, treeNode){
87 if(treeNode.isParent){
88 return;
89 } //调用easyui方法 ，判断是否创建标签
90 if(!$("#tt").tabs(‘exists‘,treeNode.mname)){ // 如果不存在此tab则创建
91 if(treeNode.url!="")
92 $("#tt").tabs(‘add‘,{
93 title:treeNode.mname,
94 href:treeNode.url,
95 closable:true,
96 });
97 }else{ // 如果已经打开则选中
98 $("#content_tabs").tabs(‘select‘,treeNode.mname);
99 }
100 }
101
102 </script>
103 <SCRIPT type="text/javascript">
104 //ztree 树的创建方法
105 var setting = {
106 data: {
107 key:{
108 name: "mname",
109 url:‘_url‘
110 },
111 simpleData: {
112 enable: true,
113 idKey: "mid",
114 pIdKey: "pmid"
115 }
116
117 },
118 callback:{
119 onClick:openTab // 单击ztree的响应函数
120 }
121 };
122
123
124
125 $(document).ready(function(){
126 $.post(‘loadMenus.action‘,function(zNodes){
127 $.fn.zTree.init($("#treeDemo"), setting, zNodes);
128 })
129
130 });
131
132 </SCRIPT>
133 </html>
时间： 2024-10-17 07:58:02