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

时间：2017-08-03 17:40:12 阅读：146 评论：0 收藏：0 [点我收藏+]

标签：return data 函数 stl sel src pre insert sim

  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>

标签：return data 函数 stl sel src pre insert sim

原文地址：http://www.cnblogs.com/bignew/p/7280782.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

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

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