zTree+EasyUi做权限遇到的小问题

最近需要做一个zTree+EasyUi的权限管理系统,以前有过接触,在做这一块时,用到了ztree,树来加载咱们的菜单栏,后台获取登录用户信息的权限列表,转换成json对象来加载到咱们的树当中,代码如下:

    

$(function(){
			var title ;
			var url;
				var setting = {
					data: {
							simpleData: {
								enable: true,
								idKey:"id",
								pIdKey:"pid"
							},
							key: {
								name: "pname",
								url:"_"
							},
							keep: {
								leaf: false
							}
						},
						callback: {
							onClick: zTreeOnClick
						}
				};
			var zNodes ;
			$.ajax({
	  				async:false,
	  				url:"<%=path%>/power/getPower.action?uid="+1,
	  				type:"post",
	  				data:{},
	  				dataType:"json",
	  				success:function (obj){
	  					zNodes = obj;
	  				}
	  			});}
加载玩树之后。因为数据库里的每个权限都带有一个URL的地址,

 

在不做处理的情况下,树节点会自动加载出来,以至于,我们每一次点击例如角色分配这些节点,会重新生成一个新的窗口,后来经百度,查看ztree的api


你会发现人家早就想到了这一点,来实现这个效果,那么, 我们就可以运用到自己的ztree当中了,

只需要配置一个空的或者无用的连接就可以了,

那么,我要的效果就可以展示出来了,希望写这一小段可以帮助到,港开始接触朋友们,谢谢,如需转载,请注明出处,旺仔搬砖在此深刻感谢!

整个jsp页面如下:

<%@ 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>
  </head>
    <base href="<%=basePath%>">
    <title>M_xw</title>
	<link rel="stylesheet" type="text/css" href="<%=path%>/jquery-easyui-1.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/jquery-easyui-1.5/themes/default/easyui.css">
	<link rel="stylesheet" href="<%=request.getContextPath() %>/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css"></link>
	<script type="text/javascript" src="<%=path%>/css/jquery-1.7.js"></script>
	<script type="text/javascript" src="<%=path%>/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="<%=path%>/jquery-easyui-1.5/jquery.easyui.min.js"></script>
  	<script type="text/javascript" src="<%=request.getContextPath() %>/zTree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath() %>/zTree/js/jquery.ztree.excheck.min.js"></script>
  	<script type="text/javascript">
	$(function(){
			var title ;
			var url;
				var setting = {
					data: {
							simpleData: {
								enable: true,
								idKey:"id",
								pIdKey:"pid"
							},
							key: {
								name: "pname",
								url:"_"
							},
							keep: {
								leaf: false
							}
						},
						callback: {
							onClick: zTreeOnClick
						}
				};
			var zNodes ;
			$.ajax({
	  				async:false,
	  				url:"<%=path%>/power/getPower.action?uid="+1,
	  				type:"post",
	  				data:{},
	  				dataType:"json",
	  				success:function (obj){
	  					zNodes = obj;
	  				}
	  			});
			$(document).ready(function(){
				$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			});
		});
		function zTreeOnClick(event, treeId, treeNode){
			var title=treeNode.name;
			var url=treeNode.url;
		     	      var b = $("#tt").tabs("exists",title);
		     	       if(b){
		     	         var tab =  $("#tt").tabs("select",title);
		     	          $(‘#tt‘).tabs(‘update‘, {
									tab: tab,
									options: {
									//	title: title,
									},
								});
		     	       }else{
				     	     $(‘#tt‘).tabs(‘add‘,{
								title: title,
								href:url,
								closable: true
							});
		      	       }
		}
  	function a(url){
  		alert(url);
  	}
  	</script>
  <body class="easyui-layout">
        <div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;">
        			<h3 style="margin-left: 500px;">欢迎进入学院管理平台</h3>
		        	<a href="" style="float: right; ">修改密码</a>
		        	<a href="" style="float: right;  margin-left: 200px; padding-left: 200px;">点击注销</a>
        </div>
        <div data-options="region:‘east‘,title:‘East‘,split:true" style="width:100px;"></div>
        <div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;">
        		<ul class="ztree" id="treeDemo"></ul>
  				<input type="button" value="提交" id="btn" />
        </div>
        <div data-options="region:‘center‘,title:‘center title‘"  style="padding:5px;background:#eee;">
			<div data-options="region:‘center‘,title:‘列表展示‘,iconCls:‘icon-add‘"></div>
	         <div id="tt" class="easyui-tabs"  url="<%=path%>/power/ct.action" data-options="fit:true,border:false,plain:true">
	         </div>
        </div>
  </body>
</html>

  

时间: 2024-10-31 17:30:27

zTree+EasyUi做权限遇到的小问题的相关文章

ASP.NET MVC+EF框架+EasyUI实现权限管理系列

http://www.cnblogs.com/hanyinglong/archive/2013/03/22/2976478.html ASP.NET MVC+EF框架+EasyUI实现权限管理系列之开篇 前言:博客又有一段时间没有更新了,心里感觉这段时间空空的,好像什么都没有学下,所以就想写博客,所以就有了这个系列,这里当然也要感谢大家了,因这个 项目我已经上传了,得到了很多网友的评价,也有好多人发邮件给我说这个框架容易出现问题,不能访问,这也是支持我写这个系列的动力,我将这个项目写成一个 系列

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(9)-TT模板的学习

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(9)-TT模板的学习 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装  (5):前台Jquery easyUI实现   (6):EF上下文实例管理   (7):DBSession的封装   (8):DBSession线程内唯一 前言:前面我们基本已经完成了一个Demo,我们在后面的

ASP.NET MVC+EF框架+EasyUI实现权限管理系列之开篇

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列之开篇 前言:博客又有一段时间没有更新了,心里感觉这段时间空空的,好像什么都没有学下,所以就想写博客,所以就有了这个系列,这里当然也要感谢大家了,因这个项目我已经上传了,得到了很多网友的评价,也有好多人发邮件给我说这个框架容易出现问题,不能访问,这也是支持我写这个系列的动力,我将这个项目写成一个系列,可能要很长时间吧,但是我肯定会一直坚持,如果我哪里写的不好欢迎大家指出我们共同学习,而且我理解的也不是很透彻,所以我想在写这样一遍

ASP.NET MVC+EF框架+EasyUI实现权限管理

4.为什么使用MVC而不是用WebForm呢? (1)为什么使用MVC而不是用WebForm呢?这个是我临时想的,因为我就是想说明一下WebForm和MVC的优缺点,来可以使大家能够更好地理解 MVC和WebForm,而不像某些人说MVC会替代WebForm,我个人认为这个可能性很小,因为各有各的好处,看在哪里使用吧,下面我就简单介绍下 WebForm和MVC的优缺点. (2)WebForm介绍 1)优点 1):支持事件模型,取决于微软提供了丰富的服务器端组建,WebForm可以快速的搭建Web

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(4)-业务逻辑层的封装

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(4)-业务逻辑层的封装 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程 前言:前面几篇博客我们基本已经介绍完了搭建整个项目和数据库访问层以及一些业务逻辑层的实现,当然了,我们的数据库访问层这样还是可以在进行封装的,但是我到这里就行了吧,项目也不大,不需要那么麻烦的,那么我们今天开始介绍我们需要介绍的内容,那就是我

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(1)-框架搭建

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(1)-框架搭建 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) 前言:这篇博客开始我们便一步一步的来实现这个权限系统的初步设计-框架搭建,首先我要说的是我们需要开发工具Visual Studio 2012或者10也行,其次是我们要有SQL Server数据库,如果是Visual Studio 2010的话,你还要安装MVC4的开发文件,这个是吗?我不记得了,谁可以回答我一下的,我一直用2012,都是集成

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(6)- EF上下文实例管理

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(6)- EF上下文实例管理 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装  (5):前台Jquery easyUI实现 前言:通过前面的五篇博客我们已经对权限系统的后台架构进行了详细的说明,那么我再前面的博客中也说到了我们的后台架构还会再改的,我准备这段时间我们继续完善我们的后台

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(7)-DBSession的封装

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(7)-DBSession的封装 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装  (5):前台Jquery easyUI实现   (6):EF上下文实例管理 前言:上篇博客中我们重新对EF框架实现上下文进行了重新的操作,而且我们也建立了DbSession,使用CallContext

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(3)-面向接口的编程

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(3)-面向接口的编程 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)  (1)框架搭建    (2):数据库访问层的设计Demo 前言:这篇博客在数据访问层的基础上面我们继续学习对这个Demo的开发,希望大家都好好理解一下这个Demo的架构,到最后我实现权限的时候我就简单的说一下搭建过程就OK了,因为这个Demo的思想就是按照权限的设计方式去设计的,下面我们开始介绍面向接口的编程思想,如果感觉好的话可以