JavaScript JsTree实例
2015-07-06 09:37
627 查看
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
相关文章推荐
- JSON 常用数据转换
- jsoup解析HTML及简单实例
- 浅谈Javascript实现继承的方法
- Console命令详解,让调试js代码变得更简单
- JavaScript保存并运算页面中数字类型变量的写法
- D3js-堆栈图
- D3js-堆栈图
- JSP页面中的注释
- JavaScript继承方式详解
- JavaScript事件代理入门
- JS引擎
- javascript中数据类型转换
- jsoup解析日志正文
- OOP in JS - Inheritance
- jstl中常用的EL函数
- JavaScript保存并运算页面中数字类型变量的写法
- 浅谈Javascript实现继承的方法
- javascript运动详解
- Jsonp post 跨域方案
- javascript动态添加删除tabs标签的方法