码迷,mamicode.com
首页 > 其他好文 > 详细

zTree学习实例

时间:2017-05-06 20:46:59      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:pre   srm   string   head   bip   bbs   pos   show   pair   

今天做完一个zTree的实例,供有需要的学习!

效果图如下:

技术分享

其中菜单的所有子节点是从数据库menu表中中读出来交给我们的zTree进行自动挂接。

接下来看看我们这个例子是如何实现的?附主要代码,有需要整个代码的可以评论!!!!

首先要用zTree必须引入这些 css和js

  <!-- 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">

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方法设计

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.jsp

其中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是一个编写后台管理菜单的好工具。

 

zTree学习实例

标签:pre   srm   string   head   bip   bbs   pos   show   pair   

原文地址:http://www.cnblogs.com/julinhuitianxia/p/6817927.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!