easyUi 学习笔记（一）使用easyui 和ztree 创建前端框架

  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="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=" 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="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>
easyUi 学习笔记 （一） 使用easyui 和ztree 创建前端框架

easyUi 学习笔记（一）使用easyui 和ztree 创建前端框架
