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+"")); } */jQuery.tree.plugins.checkbox.check($("#1"));//测试});
在ajax执行完后 就运行这个函数 这样用户看到的直接就是已经选上的权限树了
当用户修改完权限之后 如何保存 并传到后台呢
首先 应该获得所有选中权限的id
//取得选中的菜单idfunction getMenuIds(){//取得所有选中的节点，返回节点对象的集合var menu = jQuery.tree.plugins.checkbox.get_checked();//得到节点的id，拼接成字符串var ids="";for(i=0;i<menu.size();i++){ids += menu.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.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> <linkhref="${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+"")); } */jQuery.tree.plugins.checkbox.check($("#1"));});});//取得选中的菜单idfunction getMenuIds(){//取得所有选中的节点，返回节点对象的集合var menu = jQuery.tree.plugins.checkbox.get_checked();//得到节点的id，拼接成字符串var ids="";for(i=0;i<menu.size();i++){ids += menu.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.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"value="得到选中id"/><input type="button"value="取消选中" /><input type="text" id="menuIds2" /></body></html>
页:
[1]