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>
分享到：
相关推荐
电子、通信、计算机大类学生课程实验的心得体会 电子、通信、计算机大类的学生课程实验是工科教育中非常重要的一环，它不仅能够加深学生对理论知识的理解，还能培养学生的实践能力和创新思维。
【营销】任务一金融产品与金融产品营销认识.docx
1.了解LED数码管的工作原理，为秒表时钟模块的实现打下基础。 LED数码管是一种常用的数字显示器件，通过控制每个LED的亮灭来显示数字。在秒表时钟模块中，我们需要利用LED数码管的这一特性，通过单片机控制数码管的显示，从而实现时钟的功能。因此，了解LED数码管的工作原理对于实现秒表时钟模块至关重要。 2.掌握51单片机与LED数码管的接口技术，是实现秒表时钟模块的关键。 51单片机是一种常用的微控制器，可以通过接口与外部设备进行通信。在秒表时钟模块中，我们需要通过单片机与LED数码管之间的接口，控制数码管的显示。因此，掌握51单片机与LED数码管的接口技术是实现秒表时钟模块的关键。在实际操作中，我们需要根据接口协议和数据传输方式，编写相应的程序来控制数码管的显示。 3.合理利用定时器/计数器，是实现秒表时钟模块的效率保障。 在秒表时钟模块中，我们需要实现计时功能，这需要使用到定时器/计数器。定时器/计数器可以用来产生计时脉冲，从而控制秒表的计时。通过合理利用定时器/计数器，可以提高秒表时钟模块的计时精度和效率。在实际操作中，我们需要根据具体的应用场景和需求，选择合适的定时器/计数器参
个人98分期末大作业项目，代码完整下载可用。主要针对计算机相关专业的正在做课程设计和期末大作业的学生和需要项目实战练习的学习者。包含全部项目源码、该项目可以直接使用、项目都经过严格调试，下载即用确保可以运行！
实验室管理微信小程序设计
机械设计CNC自动打孔机（sw18可编辑+工程图）非常好的设计图纸100%好用.zip
51单片机使用蜂鸣器来播放音乐蜂鸣器播放音乐-小星星亮晶晶 通过PWM信号来控制蜂鸣器，改变PWM的频率，可以改变蜂鸣器的发声音调，从而可以播.适合新手使用
机械设计德国6层电万能蒸烤箱（sw21可编辑+cad）非常好的设计图纸100%好用.zip
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
超声波传感器系列 UFA-150, UFA-200 安装指南
VOS4890 户外电源系统 用户手册
金融产品可行性报告.docx
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
printer.cfg
【计算机二级实操】液晶背光开关控制实验（汇编语言）.zip
基于Spring Boot和Vue的音乐网站系统是一种使用Spring Boot框架和Vue框架进行开发的在线音乐平台系统。下面是一个简单的介绍： 后端（Spring Boot）部分： 1. 数据库设计：设计合适的数据库模式来存储音乐信息，包括歌曲、专辑、歌手等相关信息。 2. 接口设计：根据需求设计合适的RESTful API接口，用于处理前端请求。您可以使用Spring MVC来开发这些接口，并使用Spring Data JPA来处理数据库访问。 3. 用户管理：实现用户注册、登录、权限管理等功能。使用Spring Security来处理用户认证和授权。 4. 音乐资源管理：上传/编辑/删除音乐、/删除/编辑/分类专辑和歌手等功能。您可以使用Spring Boot提供的文件上传和管理功能，以及数据库来存储和管理相关信息。 5. 推荐系统：实现根据用户的兴趣和行为进行个性化的音乐推荐。可以使用协同过滤、内容推荐或机器学习等技术来进行推荐算法的实现。 前端（Vue）部分： 1. 页面设计：使用Vue框架用户界面，包括首页、歌单推荐、搜索、歌手页面等。使用Vue Router
中国各地级市工业三废数据（2006-2021年）.xlsx
本项目致力于基于扩散模型的半监督脑肿瘤分割，旨在提高医学影像在脑肿瘤诊断中的应用。项目利用扩散模型对脑部MRI影像中的肿瘤区域进行精确分割。 在数据集方面，我们使用了公开的脑部MRI影像数据集，如BRATS、Medical Segmentation Decathlon等，并进行了预处理，包括格式转换、裁剪、翻转等操作。在环境搭建方面，我们使用Python编程语言，基于TensorFlow和PyTorch深度学习框架进行开发。为了提高计算效率，我们还使用了GPU加速计算。此外，我们还采用了Docker容器技术，确保实验结果的可重复性。 项目完成后，将实现对脑部MRI影像中肿瘤区域的精确分割，为脑肿瘤的诊断和治疗提供有力支持。同时，项目成果也可应用于其他医学影像分析领域，如肿瘤检测、病变分割等。
python烟花代码
特性 可识别车型: 可以识别小轿车、货车、公交车等车型。 可统计车流量: 可以分别统计来往两方向的车流量情况。 可识别车牌: 对于清晰的视频可以识别车牌。 更多功能: 还在开发中。 安装 要运行此项目，您需要安装 Python 3.8 或更高版本