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>&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