2010.07.23——— 用jstree作权限

lipeng88213

浏览: 960660 次
性别:
来自: 北京

最近访客更多访客>>

jklwan

小小书僮

诗人lpp

oyhptiandi01

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (526)

社区版块

存档分类

json Ajax Java jQuery UI

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>

分享到：

2010.07.24——— 关于Spring jdbcTemplat ... | 2010.07.21——— struts2 redirectAction ...

2010-08-02 16:31
浏览 6899
评论(3)
分类:编程语言
查看更多

3 楼 beijibingshan2012 2014-07-31

lipeng88213 写道

beijibingshan2012 写道

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

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

没关系的，呵呵，已经自己解决了。。。

2 楼 lipeng88213 2014-03-19

beijibingshan2012 写道

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

1 楼 beijibingshan2012 2014-03-15

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论