JavaScript JsTree实例

  1 var RightTree= function () { };
  2 RightTree.prototype = {
  3 //初始化权限树
  4     InitRightTree: function () {
  5         $.ajax({
  6             type: "get",
  7             url: "/Handler/RoleHandler.ashx",
  8             dataType: "json",
  9             data: { type: 6, _: Math.random() },
 10             async: false,
 11             success: function (result) {
 12                 if (result.ReturnType == true) {
 13                     var objs = eval(‘(‘ + result.ReturnData + ‘)‘);
 14                     $("#treeCheckbox").jstree({
 15                         "core": { "data": objs },
 16                         "types": {
 17                             ‘default‘: {
 18                                 ‘icon‘: ‘fa fa-folder‘
 19                             },
 20                             ‘file‘: {
 21                                 ‘icon‘: ‘fa fa-file‘
 22                             }
 23                         },
 24                         "checkbox": {
 25                             "keep_selected_style": false
 26                         },
 27                         "plugins": ["checkbox"]
 28                     }); 
 29                 }
 30             }
 31         });
 32     },
 33     //获取已分配权限
 34     GetRightTree: function (roleId) {
 35         $.ajax({
 36             type: "get",
 37             url: "/Handler/RoleHandler.ashx",
 38             dataType: "json",
 39             data: { type: 5, Id: roleId, _: Math.random() },
 40             async: false,
 41             success: function (result) {
 42                 if (result.ReturnType == true) {
 43                     //设置权限树Tree
 44                     $.jstree.reference(‘#treeCheckbox‘).deselect_all();
 45                     var objs = eval(‘(‘ + result.ReturnData.pageJson + ‘)‘);
 46                     for (var i = 0; i < objs.length; i++) {
 47                         var obj = objs[i];
 48                         $.jstree.reference(‘#treeCheckbox‘).select_node("Page_" + obj.id);
 49                     }
 50                     objs_func = eval(‘(‘ + result.ReturnData.funcJson + ‘)‘);
 51                     $("#treeCheckbox").bind(‘click.jstree‘, function (event) {
 52                         var eventNodeName = event.target.nodeName;
 53                         if (eventNodeName == ‘A‘) {
 54                             var $subject = $(event.target).parent();
 55                             if ($subject.find(‘ul‘).length > 0) {
 56                             } else {
 57                                 var id = $(event.target).parents(‘li‘).attr(‘id‘);
 58                                 if (id.indexOf("Page_") == 0) {
 59                                     id = id.substring(5);
 60                                     $("#funcContainer").text("");
 61                                     for (var i = 0; i < objs_func.length; i++) {
 62                                         var obj = objs_func[i];
 63                                         if (obj.parent == id) {
 64                                             var isChecked = "";
 65                                             var className = "btn-default";
 66                                             if (obj.isChecked == "True") {
 67                                                 isChecked = "checked=‘checked‘ ";
 68                                                 className = "btn-primary";
 69                                             }
 70                                             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>";
 71                                             $("#funcContainer").append(str);
 72                                         }
 73                                     }
 74                                     //点击操作按钮
 75                                     $(".btnFunc").unbind("click").click(function (event) {
 76                                         var eventNodeName = event.target.nodeName;
 77                                         if (eventNodeName == ‘INPUT‘ || eventNodeName == ‘A‘) {//“LABEL”
 78                                             var fid = $(this).attr("id").substring(9);
 79                                             if ($("#check_Func_" + fid).attr("checked")) {
 80                                                 $("#check_Func_" + fid).attr("checked", false);
 81                                                 $("#btn_Func_" + fid).removeClass("btn-primary");
 82                                                 $("#btn_Func_" + fid).addClass("btn-default");
 83                                             } else {
 84                                                 $("#check_Func_" + fid).attr("checked", true);
 85                                                 $("#btn_Func_" + fid).removeClass("btn-default");
 86                                                 $("#btn_Func_" + fid).addClass("btn-primary");
 87                                             }
 88                                             var count = 0;
 89                                             for (var i = 0; i < objs_func.length; i++) {
 90                                                 var obj = objs_func[i];
 91                                                 if (obj.id == $(this).attr("id").substring(4)) {
 92                                                     obj.isChecked = $("#check_Func_" + fid).attr("checked") ? "True" : "False";
 93                                                 }
 94                                                 if (obj.parent == id && obj.isChecked == "True") {
 95                                                     count++;
 96                                                 }
 97                                             }
 98                                             if (count) {
 99                                                 $.jstree.reference(‘#treeCheckbox‘).select_node("Page_" + id);
100                                             }
101                                             else {
102                                                 $.jstree.reference(‘#treeCheckbox‘).deselect_node("Page_" + id);
103                                             }
104                                         }
105                                     });
106                                     $("#btnCheckAll").unbind("click").click(function (event) {
107                                         var eventNodeName = event.target.nodeName;
108                                         if (eventNodeName == ‘INPUT‘ || eventNodeName == ‘A‘) {//"LABEL"
109                                             if ($(this).attr("checked")) {
110                                                 $(this).attr("checked", false);
111                                                 $("input[type=‘checkbox‘]").attr("checked", false);
112                                                 $(".btnFunc").attr("class", "btn btnFunc btn-corner btn-default");
113                                                 $.jstree.reference(‘#treeCheckbox‘).deselect_node("Page_" + id);
114                                             }
115                                             else {
116                                                 $(this).attr("checked", true);
117                                                 $("input[type=‘checkbox‘]").attr("checked", true);
118                                                 $(".btnFunc").attr("class", "btn btnFunc btn-corner btn-primary");
119                                                 $.jstree.reference(‘#treeCheckbox‘).select_node("Page_" + id);
120                                             }
121                                             for (var i = 0; i < objs_func.length; i++) {
122                                                 var obj = objs_func[i];
123                                                 if (obj.parent == id) {
124                                                     obj.isChecked = $(this).attr("checked") ? "True" : "False";
125                                                 }
126                                             }
127                                         }
128                                     });
129                                 }
130                             }
131                         }
132                     });
133                 }
134             }
135         });
136     },
137     //保存配置的权限
138     SaveRightTree: function (roleId) {
139         var funcArr = new Array();
140         for (var i = 0; i < objs_func.length; i++) {
141             if (objs_func[i].isChecked == "True") {
142                 funcArr.push(objs_func[i].id);
143             }
144         }
145         var treeArr = new Array();
146         var treeSelect = $.jstree.reference(‘#treeCheckbox‘).get_selected(true);
147         for (var i = 0; i < treeSelect.length; i++) {
148             if ($.inArray(treeSelect[i].id, treeArr) < 0) {
149                 treeArr.push(treeSelect[i].id);
150             }
151             if (treeSelect[i].id.indexOf("Page_") < 0 && treeSelect[i].parent != "#" && $.inArray(treeSelect[i].parent, treeArr) < 0) {
152                 treeArr.push(treeSelect[i].parent);
153             }
154         }
155         var funcList = funcArr.join(‘,‘);
156         var treeList = treeArr.join(‘,‘);
157         $.ajax({
158             type: "post",
159             url: "/Handler/RoleHandler.ashx",
160             dataType: "json",
161             data: { type: 7, RoleId: roleId, FuncList: funcList, TreeList: treeList, _: Math.random() },
162             async: false,
163             cache: false,
164             complete: function () { },
165             success: function (result) {
166                 if (result.ReturnType) {
167                     alert(result.ReturnMsg);
168                 }
169             }
170         });
171     }
172 }