2010.07.23——— 用jstree作权限 jsonAjaxJavajQueryUI
程序员文章站
2022-07-11 22:01:46
...
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
这样只是生成了树 但是我们要传过来的权限树 有些权限应该是已经选上了 所以
设置一个隐藏域 用来接收传过来的已有权限id
然后
在ajax执行完后 就运行这个函数 这样用户看到的直接就是已经选上的权限树了
当用户修改完权限之后 如何保存 并传到后台呢
首先 应该获得所有选中权限的id
然后把这个ids也放到隐藏域中
点击保存时 就把这个数据传到后台了 呵呵
当然 还应该有一个重置的方法 ：
这样就差不多 完工了
对了 上面 那个json模拟数据 ：
另附：完整代码：
参考：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>