`

2010.07.23——— 用jstree作权限

阅读更多
2010.07.23——— 用jstree作权限

参考:http://hi.baidu.com/sdy2006/blog/item/38b0fd19b3966276dbb4bd18.html
      http://www.iteye.com/topic/698823
      http://blog.csdn.net/am20100204/archive/2010/07/07/5719623.aspx

首先 引入:
<script src="${pageContext.request.contextPath}/js/jstree/jquery.tree.js" type="text/javascript"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jstree/plugins/jquery.tree.checkbox.js"></script>


然后 是 生成树的js

$(function(){
	$.ajaxSetup({cache:false});//ajax调用不使用缓存
	//树
    $("#menuTree").tree({
        //主题
        ui : {
        	theme_name : "checkbox" 
        } ,
        data : {
          type : "json",
          async : false,
          opts : {
          	method: "POST",
           	url : "../json/jstree.json"
          }
       	},
       	types :{  
	        "default" : {  
	        	draggable : false //设置节点不可拖拽  
	        }  
        },
        plugins : {
         	//插件
         	checkbox : {}
       	}  
      });
});


这样只是生成了树  但是我们要传过来的权限树 有些权限应该是已经选上了 所以

<input type="hidden" name="checkedMenu" id="checkedMenu"value="<s:property value='checkedMenu' />" />


设置一个隐藏域 用来接收传过来的已有权限id

然后

//初始化原有菜单权限
$("#menuTree").ajaxStop(function(){
	/*
	//得到服务器传过来的原有权限id的字符串,格式自定义,我的格式为"0001;0002;xxx;"
   	var checkMenu = $('#checkedMenu').val();
   	//分割字符串成数组
   	var array = checkMenu.split(";");
   	for(var i=0;i<array.length;i++){
	   	//设置原有权限菜单处于选中状态,其中$("#0001")为id为0001的节点。
	    jQuery.tree.plugins.checkbox.check($("#"+array[i]+""));
    }
    */
	jQuery.tree.plugins.checkbox.check($("#1"));//测试
});


在ajax执行完后 就运行这个函数 这样用户看到的直接就是已经选上的权限树了


当用户修改完权限之后 如何保存 并传到后台呢

首先 应该获得所有选中权限的id

//取得选中的菜单id
function getMenuIds(){
	//取得所有选中的节点,返回节点对象的集合
	var menu = jQuery.tree.plugins.checkbox.get_checked();
	//得到节点的id,拼接成字符串
	var ids="";
	for(i=0;i<menu.size();i++){
		ids += menu[i].id+";";
	}
	//写回表单
	$('#menuIds').val(ids);
} 


然后把这个ids也放到隐藏域中

<input type="hidden" name="menuIds"  id="menuIds" />


点击保存时 就把这个数据传到后台了 呵呵

当然 还应该有一个重置的方法 :

//重置
function reset1(){
	/**
	//得到所有选中的节点集合
	var menu = jQuery.tree.plugins.checkbox.get_checked();
	for(i=0;i<menu.size();i++){
	//去掉其选中状态
	jQuery.tree.plugins.checkbox.uncheck($("#"+menu[i].id+""));
	}
	*/
	jQuery.tree.plugins.checkbox.uncheck($("#1"));//测试
}


这样就差不多 完工了

对了 上面 那个json模拟数据 :

[
	{ attributes: {id: "1"},data : "A node", children : [ { attributes: {id: "2"},data : "Only child" } ,{ attributes: {id: "4"},data : "Only child" }], state : "open" },
	{ attributes: {id: "3"},data : "Some other node" }
]


另附:完整代码:

<%@ page language="java"  pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	    
    <title>角色管理</title>
    
	<link  href="${pageContext.request.contextPath}/ui/css/style.css" rel="stylesheet"  type="text/css"/>
	<script src="${pageContext.request.contextPath}/ui/js/table.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/js/jquery-1.3.2.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/js/jstree/jquery.tree.js" type="text/javascript"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jstree/plugins/jquery.tree.checkbox.js"></script>
<style type="text/css">

</style>
<script type="text/javascript">

$(function(){
	$.ajaxSetup({cache:false});//ajax调用不使用缓存
	//树
    $("#menuTree").tree({
        //主题
        ui : {
        	theme_name : "checkbox" 
        } ,
        data : {
          type : "json",
          async : false,
          opts : {
          	method: "POST",
           	url : "../json/jstree.json"
          }
       	},
       	types :{  
	        "default" : {  
	        	draggable : false //设置节点不可拖拽  
	        }  
        },
        plugins : {
         	//插件
         	checkbox : {}
       	}  
      });

	//初始化原有菜单权限
	$("menuTree").ajaxStop(function(){
		/*
		//得到服务器传过来的原有权限id的字符串,格式自定义,我的格式为"0001;0002;xxx;"
   		var checkMenu = $('#checkedMenu').val();
   		//分割字符串成数组
   		var array = checkMenu.split(";");
   		for(var i=0;i<array.length;i++){
	   	//设置原有权限菜单处于选中状态,其中$("#0001")为id为0001的节点。
	    	jQuery.tree.plugins.checkbox.check($("#"+array[i]+""));
    		}
    		*/
		jQuery.tree.plugins.checkbox.check($("#1"));
	});
});



//取得选中的菜单id
function getMenuIds(){
	//取得所有选中的节点,返回节点对象的集合
	var menu = jQuery.tree.plugins.checkbox.get_checked();
	//得到节点的id,拼接成字符串
	var ids="";
	for(i=0;i<menu.size();i++){
		ids += menu[i].id+";";
	}
	//写回表单
	$('#menuIds2').val(ids);
} 
//重置
function reset1(){
	/**
	//得到所有选中的节点集合
	var menu = jQuery.tree.plugins.checkbox.get_checked();
	for(i=0;i<menu.size();i++){
	//去掉其选中状态
	jQuery.tree.plugins.checkbox.uncheck($("#"+menu[i].id+""));
	}
	*/
	jQuery.tree.plugins.checkbox.uncheck($("#1"));
}

</script>
</head>
<body>
	<input type="hidden" name="checkedMenu" id="checkedMenu"value="<s:property value='checkedMenu' />" />
	<input type="hidden" name="menuIds"  id="menuIds" />
	<div id="menuTree"></div>   
	<br />
	<input type="button" onclick="getMenuIds()" value="得到选中id"/>
	<input type="button" onclick="reset1()" value="取消选中" />
	<input type="text" id="menuIds2" />
	
</body>
</html>
分享到:
评论
3 楼 beijibingshan2012 2014-07-31  
lipeng88213 写道
beijibingshan2012 写道
恩,这篇文章写得不错,不过我想问您一个问题,就是我现在页面上要实现,增加用户,修改用户的功能,其中用户具有权限列表,当我点击修改用户的时候,用户的权限列表就会在树上显示出来,当我再点击新建用户的时候,这个时候我的树已经重新生成了,可是树却没有清空,不知道这个是为什么?请问您可否帮忙解决下,谢谢!

实在抱歉,已经很多年不做前端了,短时间是拾不起来,要不您通过搜索引擎找找吧,不好意思哈

没关系的,呵呵,已经自己解决了。。。
2 楼 lipeng88213 2014-03-19  
beijibingshan2012 写道
恩,这篇文章写得不错,不过我想问您一个问题,就是我现在页面上要实现,增加用户,修改用户的功能,其中用户具有权限列表,当我点击修改用户的时候,用户的权限列表就会在树上显示出来,当我再点击新建用户的时候,这个时候我的树已经重新生成了,可是树却没有清空,不知道这个是为什么?请问您可否帮忙解决下,谢谢!

实在抱歉,已经很多年不做前端了,短时间是拾不起来,要不您通过搜索引擎找找吧,不好意思哈
1 楼 beijibingshan2012 2014-03-15  
恩,这篇文章写得不错,不过我想问您一个问题,就是我现在页面上要实现,增加用户,修改用户的功能,其中用户具有权限列表,当我点击修改用户的时候,用户的权限列表就会在树上显示出来,当我再点击新建用户的时候,这个时候我的树已经重新生成了,可是树却没有清空,不知道这个是为什么?请问您可否帮忙解决下,谢谢!

相关推荐

    基于因子分析的我国A股上市...争力评价——以医药企业为例_张澳.caj

    基于因子分析的我国A股上市...争力评价——以医药企业为例_张澳.caj

    微信小程序——新闻客户端(截图+源码).zip

    微信小程序——新闻客户端(截图+源码).zip 微信小程序——新闻客户端(截图+源码).zip 微信小程序——新闻客户端(截图+源码).zip 微信小程序——新闻客户端(截图+源码).zip 微信小程序——新闻客户端(截图+...

    微信小程序——万年历(截图+源码).zip

    微信小程序——万年历(截图+源码).zip 微信小程序——万年历(截图+源码).zip 微信小程序——万年历(截图+源码).zip 微信小程序——万年历(截图+源码).zip 微信小程序——万年历(截图+源码).zip 微信小程序...

    python项目——Word助手.zip

    python项目——Word助手.zip python项目——Word助手.zip python项目——Word助手.zip python项目——Word助手.zip python项目——Word助手.zip python项目——Word助手.zip python项目——Word助手.zip python项目...

    python项目——RCQ读者书库.zip

    python项目——RCQ读者书库.zip python项目——RCQ读者书库.zip python项目——RCQ读者书库.zip python项目——RCQ读者书库.zip python项目——RCQ读者书库.zip python项目——RCQ读者书库.zip python项目——RCQ...

    微信小程序——卡卡汽车 获取用户 设备信息(截图+源码).zip

    微信小程序——卡卡汽车 获取用户 设备信息(截图+源码).zip 微信小程序——卡卡汽车 获取用户 设备信息(截图+源码).zip 微信小程序——卡卡汽车 获取用户 设备信息(截图+源码).zip 微信小程序——卡卡汽车 ...

    java毕业设计——百货中心供应链管理系统(论文+源代码+数据库+讲解视频).zip

    java毕业设计——百货中心供应链管理系统(论文+源代码+数据库+讲解视频).zip java毕业设计——百货中心供应链管理系统(论文+源代码+数据库+讲解视频).zip java毕业设计——百货中心供应链管理系统(论文+源代码+...

    RSA加密(RSA..js BigInt.js Barrett.js)

    在这个压缩包中,包含了三个JavaScript文件:RSA.js、BigInt.js和Barrett.js,这些都是实现RSA加密前端功能的重要组成部分。 首先,RSA.js是核心加密库,它包含了RSA算法的具体实现。RSA算法基于两个大素数的乘积,...

    JDK_1.7,amd64_ubuntu,安装包,直接下载安装即可完成1.7版本的SDK包。原生安装,不用配置环境变量,

    1,安装说明.txt ——————————安装手册 2,jdk-170.tar.gz ——————————JDK1.7deb包 3,switch_java.sh -------------------------java其它版本切换 4,check_java.sh———————————版本...

    mui.js和mui.min.js

    本文将详细探讨MUI的核心组件库——mui.js和其压缩版本mui.min.js。 首先,我们来认识一下`mui.js`。这个文件是MUI框架的完整源代码,包含了所有未经过压缩和优化的JavaScript代码。开发者在开发阶段通常会使用这个...

    pdf.js和pdf.worker.js

    要使用PDF.js,首先需要在项目中引入pdf.js库,通常包括pdf.js和pdf.worker.js两个文件。然后,通过调用提供的API,如`PDFJS.getDocument()`来加载PDF文件,并监听事件以执行相应的操作。例如,当PDF文件加载完成时...

    flv.js 和flv-min.js

    FLV.js和flv-min.js是两个与视频流播放相关的JavaScript库,主要应用于网页中实现FLV(Flash Video)格式的视频播放。FLV是一种常见的视频格式,常用于在线流媒体服务,尤其在HTML5技术普及之前,它依赖于Adobe ...

    jquery.mobile.custom.min(v1.4.2).js

    jquery.mobile.custom.min.js v1.4.2 偶然发现这文件不好找还有挺贵,所以传一个

    Geomagic.Studio.2012软件——part5

    Geomagic.Studio.2012软件,由于太大,分成八个压缩包以及一个其他文件包。 此文件为part5

    小学语文常用歇后语分类大全歇后语20条及解释

    【标题】与【描述】提及的是关于小学语文学习中的一个重要组成部分——歇后语。歇后语是中国传统文化中的一种独特语言现象,它结合了形象生动的比喻和巧妙的谐音,通常用于表达幽默、讽刺或者寓意深刻的观点。这些歇...

    react下载,包括react.development.js;babel.min.js;react-dom.development.js

    在这个压缩包中,包含的三个关键文件——`react.development.js`, `babel.min.js`, 和 `react-dom.development.js`,都是React生态系统中的重要组成部分。 1. **react.development.js**: 这是React库的开发版本。在...

    browser.min.js和polyfill.min.js(用于支持ES6语法兼容IE).zip

    在实际开发中,除了使用"browser.min.js"和"polyfill.min.js",还应考虑使用现代构建工具(如Webpack或Rollup)和模块打包器,它们在编译时可以自动将ES6代码转换为ES5,同时自动插入必要的垫片,以确保代码在所有...

    Axure设计之日期时间范围选择器.rp

    Now.getHours() ——使用世界标准时间获取当前日期对象“小时”部分数值(0 ~ 23) Now.getMinutes() ——使用世界标准时间获取当前日期对象“分钟”部分数值(0 ~59)。 Now.getUTCSeconds() ——使用世界标准时间...

    jsTree.v.1.0rc2

    3. **文档(_docs)**:`_docs`文件夹可能包含了关于jsTree API、教程和使用方法的文档。这些文档对于开发者来说至关重要,它们帮助理解如何初始化树结构,添加、删除和操作节点,以及如何响应用户的交互事件。 4. ...

Global site tag (gtag.js) - Google Analytics