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

首先 引入：

然后 是 生成树的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 : {}
       	}  
      });
});

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

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

然后

//初始化原有菜单权限
$("#menuTree").ajaxStop(function(){
	/*
	//得到服务器传过来的原有权限id的字符串，格式自定义，我的格式为"0001;0002;xxx;"
   	var checkMenu = $('#checkedMenu').val();
   	//分割字符串成数组
   	var array = checkMenu.split(";");
   	for(var i=0;i 
 
 
 
在ajax执行完后 就运行这个函数 这样用户看到的直接就是已经选上的权限树了 
 
 
 
 
 
当用户修改完权限之后 如何保存 并传到后台呢 
 
 
 
首先 应该获得所有选中权限的id 
 
 
 
 
 
//取得选中的菜单id
function getMenuIds(){
	//取得所有选中的节点，返回节点对象的集合
	var menu = jQuery.tree.plugins.checkbox.get_checked();
	//得到节点的id，拼接成字符串
	var ids="";
	for(i=0;i 
 
 
 
然后把这个ids也放到隐藏域中 
 
 
 
 
 
 
 
 
 
点击保存时 就把这个数据传到后台了 呵呵 
 
 
 
当然 还应该有一个重置的方法 ： 
 
 
 
 
 
//重置
function reset1(){
	/**
	//得到所有选中的节点集合
	var menu = jQuery.tree.plugins.checkbox.get_checked();
	for(i=0;i 
 
 
 
这样就差不多 完工了 
 
 
 
对了 上面 那个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"%>