JavaScript JsTree实例
var RightTree= function () { };
RightTree.prototype = {
//初始化权限树
InitRightTree: function () {
$.ajax({
type: "get",
url: "/Handler/RoleHandler.ashx",
dataType: "json",
data: { type: 6, _: Math.random() },
async: false,
success: function (result) {
if (result.ReturnType == true) {
var objs = eval('(' + result.ReturnData + ')');
$("#treeCheckbox").jstree({
"core": { "data": objs },
"types": {
'default': {
'icon': 'fa fa-folder'
},
'file': {
'icon': 'fa fa-file'
}
},
"checkbox": {
"keep_selected_style": false
},
"plugins": ["checkbox"]
});
}
}
});
},
//获取已分配权限
GetRightTree: function (roleId) {
$.ajax({
type: "get",
url: "/Handler/RoleHandler.ashx",
dataType: "json",
data: { type: 5, Id: roleId, _: Math.random() },
async: false,
success: function (result) {
if (result.ReturnType == true) {
//设置权限树Tree
$.jstree.reference('#treeCheckbox').deselect_all();
var objs = eval('(' + result.ReturnData.pageJson + ')');
for (var i = 0; i < objs.length; i++) {
var obj = objs[i];
$.jstree.reference('#treeCheckbox').select_node("Page_" + obj.id);
}
objs_func = eval('(' + result.ReturnData.funcJson + ')');
$("#treeCheckbox").bind('click.jstree', function (event) {
var eventNodeName = event.target.nodeName;
if (eventNodeName == 'A') {
var $subject = $(event.target).parent();
if ($subject.find('ul').length > 0) {
} else {
var id = $(event.target).parents('li').attr('id');
if (id.indexOf("Page_") == 0) {
id = id.substring(5);
$("#funcContainer").text("");
for (var i = 0; i < objs_func.length; i++) {
var obj = objs_func[i];
if (obj.parent == id) {
var isChecked = "";
var className = "btn-default";
if (obj.isChecked == "True") {
isChecked = "checked='checked' ";
className = "btn-primary";
}
var str = "<a href='#3' style = 'width:200px; height:40px;' id='btn_" + obj.id + "' class='btn btnFunc " + className + " btn-corner'><input id='check_" + obj.id + "' type='checkbox' hidden='hidde' " + isChecked + "' /><label style = 'position:absolute; width:200px; height:42px; margin-left:-100px; margin-top:-8px; line-height:42px' id='lb_" + obj.id + "' for='check_" + obj.id + "'>" + obj.text + "</label></a> </br></br>";
$("#funcContainer").append(str);
}
}
//点击操作按钮
$(".btnFunc").unbind("click").click(function (event) {
var eventNodeName = event.target.nodeName;
if (eventNodeName == 'INPUT' || eventNodeName == 'A') {//“LABEL”
var fid = $(this).attr("id").substring(9);
if ($("#check_Func_" + fid).attr("checked")) {
$("#check_Func_" + fid).attr("checked", false);
$("#btn_Func_" + fid).removeClass("btn-primary");
$("#btn_Func_" + fid).addClass("btn-default");
} else {
$("#check_Func_" + fid).attr("checked", true);
$("#btn_Func_" + fid).removeClass("btn-default");
$("#btn_Func_" + fid).addClass("btn-primary");
}
var count = 0;
for (var i = 0; i < objs_func.length; i++) {
var obj = objs_func[i];
if (obj.id == $(this).attr("id").substring(4)) {
obj.isChecked = $("#check_Func_" + fid).attr("checked") ? "True" : "False";
}
if (obj.parent == id && obj.isChecked == "True") {
count++;
}
}
if (count) {
$.jstree.reference('#treeCheckbox').select_node("Page_" + id);
}
else {
$.jstree.reference('#treeCheckbox').deselect_node("Page_" + id);
}
}
});
$("#btnCheckAll").unbind("click").click(function (event) {
var eventNodeName = event.target.nodeName;
if (eventNodeName == 'INPUT' || eventNodeName == 'A') {//"LABEL"
if ($(this).attr("checked")) {
$(this).attr("checked", false);
$("input[type='checkbox']").attr("checked", false);
$(".btnFunc").attr("class", "btn btnFunc btn-corner btn-default");
$.jstree.reference('#treeCheckbox').deselect_node("Page_" + id);
}
else {
$(this).attr("checked", true);
$("input[type='checkbox']").attr("checked", true);
$(".btnFunc").attr("class", "btn btnFunc btn-corner btn-primary");
$.jstree.reference('#treeCheckbox').select_node("Page_" + id);
}
for (var i = 0; i < objs_func.length; i++) {
var obj = objs_func[i];
if (obj.parent == id) {
obj.isChecked = $(this).attr("checked") ? "True" : "False";
}
}
}
});
}
}
}
});
}
}
});
},
//保存配置的权限
SaveRightTree: function (roleId) {
var funcArr = new Array();
for (var i = 0; i < objs_func.length; i++) {
if (objs_func[i].isChecked == "True") {
funcArr.push(objs_func[i].id);
}
}
var treeArr = new Array();
var treeSelect = $.jstree.reference('#treeCheckbox').get_selected(true);
for (var i = 0; i < treeSelect.length; i++) {
if ($.inArray(treeSelect[i].id, treeArr) < 0) {
treeArr.push(treeSelect[i].id);
}
if (treeSelect[i].id.indexOf("Page_") < 0 && treeSelect[i].parent != "#" && $.inArray(treeSelect[i].parent, treeArr) < 0) {
treeArr.push(treeSelect[i].parent);
}
}
var funcList = funcArr.join(',');
var treeList = treeArr.join(',');
$.ajax({
type: "post",
url: "/Handler/RoleHandler.ashx",
dataType: "json",
data: { type: 7, RoleId: roleId, FuncList: funcList, TreeList: treeList, _: Math.random() },
async: false,
cache: false,
complete: function () { },
success: function (result) {
if (result.ReturnType) {
alert(result.ReturnMsg);
}
}
});
}
172 }
http://www.jstree.com/ Jstree API
JavaScript JsTree实例的更多相关文章
- JavaScript小实例:拖拽应用(二)
经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...
- javascript小实例,拖拽应用(一)
前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...
- JavaScript 小实例 - 表单输入内容检测,对页面的增删改
JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...
- 10种JavaScript特效实例让你的网站更吸引人
我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预 ...
- JavaScript图形实例:线段构图
在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...
- JavaScript动画实例:李萨如曲线
在“JavaScript图形实例:阿基米德螺线”和“JavaScript图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法.如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以 ...
- JavaScript动画实例:递归分形图动态展示
在“JavaScript图形实例:SierPinski三角形” 和“JavaScript图形实例:Levy曲线及其变形”等文章中我们介绍了通过递归生成分形图形的方法.我们可以将绘制的分形图形每隔一定的 ...
- JavaScript图形实例:再谈IFS生成图形
在“JavaScript图形实例:迭代函数系统生成图形”一文中,我们介绍了采用迭代函数系统(Iterated Function System,IFS)创建分形图案的一些实例.在该文中,仿射变换函数W的 ...
- JavaScript图形实例:随机SierPinski三角形
在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方 ...
随机推荐
- uoj98未来程序改 纯暴力不要想了
暴力模拟A了,数据还是良(shui)心(shui)的 90分的地方卡了半天最后发现一个局部变量被我手抖写到全局去了,,, 心碎*∞ 没什么好解释的,其实只要写完表达式求值(带函数和变量的),然后处理一 ...
- HDU 2509 Nim博弈变形
1.HDU 2509 2.题意:n堆苹果,两个人轮流,每次从一堆中取连续的多个,至少取一个,最后取光者败. 3.总结:Nim博弈的变形,还是不知道怎么分析,,,,看了大牛的博客. 传送门 首先给出结 ...
- iOS AFNetWorking 3.1 的网络解析
AFNetworking 3.0中废弃: AFURLConnectionOperation AFHTTPRequestOperation AFHTTPRequestOperationManager ...
- js Date学习
Date.parse()接收一个表示日期的字符串参数(参数错误时返回NaN),返回相应日期的毫秒数.(使用自 UTC(Coordinated Universal Time,国际协调时间)1970 年 ...
- 解决Ionic的ion-slide-box 2条数据渲染问题
当slider数据列表是动态获取时,如果数据结果只有2条数据时,slider列表会多复制俩个,通过下面的slideChange方法做个判断可以解决这个bug 第一步:添加slideChande方法 & ...
- java并发编程(十七)内存操作总结
转载请注明出处:http://blog.csdn.net/ns_code/article/details/17377197 主内存与工作内存 Java内存模型的主要目标是定义程序中各个变量的访问规则, ...
- [LeetCode]444. Sequence Reconstruction
Check whether the original sequence org can be uniquely reconstructed from the sequences in seqs. Th ...
- What's the difference between a stub and mock?
I believe the biggest distinction is that a stub you have already written with predetermined behavio ...
- 【图文教程】Eclipse for PHP+XAMPP调试配置
一.下载安装XAMPP 下载地址:https://www.apachefriends.org/download.html, 一路“Next”,安装完毕. 二.下载Eclipse for PHP 下载地 ...
- RPC 的概念模型与实现解析
今天分布式应用.云计算.微服务大行其道,作为其技术基石之一的 RPC 你了解多少?一篇 RPC 的技术总结文章,数了下 5k+ 字,略长,可能也不适合休闲的碎片化时间阅读,可以先收藏抽空再细读:) 全 ...