zTree學習實例

時間 2019-11-08

標籤 ztree 學習實例简体版

原文原文鏈接

今天作完一個zTree的實例，供有須要的學習！javascript

效果圖以下：css

其中菜單的全部子節點是從數據庫menu表中中讀出來交給咱們的zTree進行自動掛接。html

接下來看看咱們這個例子是如何實現的？附主要代碼，有須要整個代碼的能夠評論！！！！java

首先要用zTree必須引入這些 css和jsjquery

<link rel="stylesheet" type="text/css" href="ztree/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript">sql

1.數據庫（menu表）的設計數據庫

CREATE TABLE `menu` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `pid` INT(11) DEFAULT NULL,
  `title` VARCHAR(50) NOT NULL,
  `url` VARCHAR(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=19 DEFAULT CHARSET=utf8;

/*Data for the table `menu` */

INSERT  INTO `menu`(`id`,`pid`,`title`,`url`) VALUES (1,0,'人力資源管理',''),(2,1,'部門管理',''),(3,1,'員工管理',''),(4,1,'福利管理',''),(5,1,'考勤管理',''),(6,2,'部門列表','deplist.jsp'),(7,2,'部門添加','depadd.jsp'),(8,2,'部門審覈','depcheck.jsp'),(9,3,'員工列表','emplist.jsp'),(10,3,'員工添加','empadd.jsp'),(11,3,'員工審覈','empcheck.jsp'),(12,4,'福利列表','emplist.jsp'),(13,4,'福利添加','empadd.jsp'),(14,5,'今日打卡','card.jsp'),(15,5,'打卡列表','cardlist.jsp'),(16,5,'請假列表','qjlist.jsp'),(17,5,'請假申請','qjadd.jsp'),(18,5,'請假審覈','qjcheck.jsp');

2.menu實體類的findAll方法設計json

public List findAll() {
		log.debug("finding all Menu instances");
		try {
			String queryString = "from Menu order by id";
			return getHibernateTemplate().find(queryString);
		} catch (RuntimeException re) {
			log.error("find all failed", re);
			throw re;
		}
	}

這個方法我是從hibernate爲咱們自動生成的menuDao中借過來的.異步

3.main.jspjsp

其中script標籤中代碼很重要，黑色背景的代碼爲action中一個show方法

@Action(value="show_Menu")
	public String show() {
		List<Menu> lsmenu = imbiz.findAll();
		// 禁止屬性關聯
		PropertyFilter filter = AjaxUtil.filterProperty("students");
		// 使用fastJOSN的JSONObject類將map轉換爲josn字符串
		String jlsca = JSONObject.toJSONString(lsmenu, filter,
				SerializerFeature.DisableCircularReferenceDetect);
		System.out.println("json字符串--->" + jlsca);
		AjaxUtil.printString(jlsca);
		return null;
	}

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'main.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" href="easyui/themes/default/easyui.css"
	type="text/css"></link>
	<link rel="stylesheet" href="easyui/themes/icon.css" type="text/css"></link>
	<script type="text/javascript" src="easyui/jquery.min.js"></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
	
	<!-- ztree的js和css -->
  <link rel="stylesheet" type="text/css" href="ztree/css/zTreeStyle/zTreeStyle.css">
  <script type="text/javascript" src="ztree/js/jquery.ztree.core.js"></script>
  <script type="text/javascript" src="ztree/js/jquery.ztree.excheck.js"></script>
  <script type="text/javascript" src="ztree/js/jquery.ztree.exedit.js"></script>
  <script type="text/javascript">
  		/**************************ztree************************************/
  		 //設置ztree標題的顏色
		 function setFontCss(treeId, treeNode) {  
	            return treeNode.level == 1 ? {color:"red"} : {};  
	     };  
	     
	     var setting = {  
	             //  check: {  
	             //     enable: true//啓動多選框記得導入jquery.ztree.excheck-3.4.js   
	             // },  
	                 
	               data: {  
	                   simpleData: {  
	                       enable: true,//若是設置爲 true，請務必設置 setting.data.simpleData 內的其餘參數: idKey / pIdKey / rootPId，而且讓數據知足父子關係。  
	                       idKey: "id",  
	                       pIdKey: "pid",  
	                       rootPId: 0  
	                   },
	                   key: {
	           			name: "title",
	           			url:""
	           		}

	               },  
	                             
	                 
	               view: {  
	                   showLine: false,//顯示鏈接線  
	                   showIcon: true,//顯示節點圖片  
	                   //fontCss: {color:"red"}  
	                   fontCss: setFontCss//節點顏色  
	               },  
	                 
	               async: {    //ztree異步請求數據  
	                   enable: true,  
	                   url: "show_Menu.action",//請求action方法  
	                   autoparam:["id"]  
	               },
	               callback:{
		               	beforeClick: zTreeBeforeClick,
		               	onAsyncSuccess: zTreeOnAsyncSuccess

	               }
	           };  
	     
			//啓動樹節點	     
	     	$(function($){  
	          
	            $.fn.zTree.init($("#treeDemo"), setting);  
	        }); 
			
			function zTreeOnAsyncSuccess(){
				//alert('加載樹成功');
				var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
				treeObj.expandAll(true);

			}

	      	function showPanel(stitle,urlpath){  
	      		//alert(urlpath); 子節點請求路徑		
	      		if($('#ttab').tabs('exists',stitle)){
	      			$('#ttab').tabs('select',stitle);
	      		}else{
	      			$('#ttab').tabs('add',{    
	    	  		    title:stitle,    
	    	  		    content:'<iframe src='+urlpath+' scrolling=no frameborder=0 height=100% width=100% marginheight=0 marginwidth=0/>',    
	    	  		    closable:true
	    	  		}); 
	      		}

	      	}
	      	
	      	//樹節點的點擊事件
	      	function zTreeBeforeClick(treeId, treeNode, clickFlag) {
	      		//alert("treeNode.id--->"+treeNode.id);
	      		//alert("treeNode.url--->"+treeNode.url);
	      		//alert("treeNode.name--->"+treeNode.title);
	      		if(treeNode.url !== ''){//不新建標籤頁面顯示,讓頁面顯示在中心區域
	      			showPanel(treeNode.title,treeNode.url);
	      		}
	      			
	        	return (treeNode.id !== 1);
	    	};
  		/*******************************************************************/
  </script>
  </head>
  
   <body class="easyui-layout">   
    <div data-options="region:'north',title:'',split:true" style="height:120px;">
    	<img src="image/banner1.jpg" height="96px" width="100%"></img><br>
    	<div align="right">當前登陸用戶:xxx <a href="#">退出登陸</a></div>
    </div>   
    <div data-options="region:'south',title:'',split:true" style="height:50px;">
    	<hr/>
    	<div align="center">copyright 西安金智科技有限公司版權全部</div>
    </div>   
    <div data-options="region:'east',iconCls:'icon-reload',border:true,title:'East',split:true,collapsible:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'人力資源管理系統',split:true" style="width:150px;">
    	 <div class="content_wrap">
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
		</div>
    </div>   
    <div id="mycent" data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
    	<!-- 標籤頁佈局 -->
    	<div id="ttab" class="easyui-tabs" style="width:'fit';height:450px;">   
		    
		</div>  
    	
    
    </div>   
</body>  
</html>

zTree是一個編寫後臺管理菜單的好工具。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。