用jstree作权限 CheckBox 控制选择
参考：http://lipeng88213.javaeye.com/blog/727264
：http://junchao.javaeye.com/blog/698823
前台代码：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>角色管理</title>
<link type="text/css" rel="stylesheet" href="../js/jstree/js0.9/themes/default/style.css"/>
<script src="../lib/jquery-1.3.2.js"type="text/javascript"></script>
<script src="../js/jstree/js0.9/jquery.tree.js"type="text/javascript"></script>
<script type="text/javascript" src="../js/jstree/js0.9/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.aspx"
}
},
types :{
"default" : {
draggable : false //设置节点不可拖拽
}
},
plugins : {
//插件
checkbox : {}
}
}).bind('click.jstree', function(event) {
var eventNodeName = event.target.nodeName;
if (eventNodeName == 'INS') {
return;
} else if (eventNodeName == 'A') {
var $subject = $(event.target).parent();
if ($subject.find('ul').length > 0)
{
//$('#show').html("<font color='red' size='2em'>请选择叶子节点</font>");
}
else
{
alert( $subject.text());
alert($subject.attr("id"));//获取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($("#12"));
});
});
//取得选中的菜单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="" />
<input type="button" onclick="getMenuIds()" value="得到选中id"/>
<input type="button" onclick="reset1()" value="取消选中" />
<input type="text" id="menuIds2" />
<br />
<input type="hidden" name="menuIds" id="menuIds" />
<div id="menuTree" style="height:500px"></div>
</body>
</html>
后台代码：json.aspx
public partial class json : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.ContentType = "application/json";
//string test = "{/"attr/":{/"id/":/"11/",/"rel/":/"folder/"}, /"children/" : [ { /"data/" : /"彭涛test1/", /"state/" : /"closed/" },{ /"data/" : /"彭涛test2/", /"state/" : /"closed/" } ], /"data/":/"彭涛/",/"state/":/"closed/"}";
string test = "[{/"data/":/"系统基础/",/"state/":/"open/",/"attributes/":{/"id/":/"1/"},/"children/" : [ { /"data/" : /"彭涛test1/", /"state/" : /"closed/",/"attributes/":{/"id/":/"11/"} },{ /"data/" : /"彭涛test2/", /"state/" : /"closed/" ,/"attributes/":{/"id/":/"12/"}} ]},{/"data/":/"业务逻辑/",/"state/":/"closed/",/"attributes/":{/"id/":/"2/"}}]";
//string test = "[ { 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/" }]";
Response.Write(test);
}
}