JavaScript JsTree实例

时间:2022-04-11 21:12:38
 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>&nbsp</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