jsTree树形菜单分类

这里我演示的jsTree是基于ABP框架 ，展示部分代码，话不多说首先看效果如：

1：引入JS

<link href="/jstree/themes/default/style.css" rel="stylesheet" />
<script src="/jstree/jstree.js"></script>

2:页面部分代码

  <div class="row">
                                 <div class="col-lg-6 border_solid first_border_solid">
                                     <div class="portlet light">
                                         <div class="portlet-title">
                                             <div class="caption">
                                                 <span class="caption-subject bold uppercase">
                                                     树形菜单分类
                                                 </span>
                                                 <a ng-if="vm.permissions.managecategoryTree" ng-click="vm.categoryTree.addUnit(null)" class="btn btn-primary">
                                                     <i class="fa fa-plus"></i> 新增资源分类
                                                 </a>
                                             </div>
                                         </div>
                                         <div class="portlet-body">
                                             <div id="CategoryEditTree"></div>
                                             <div ng-if="!vm.categoryTree.unitCount" class="text-muted">
                                                 当前没有资源分类信息
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="col-lg-5 border_solid second_border_solid">
                                     <div class="portlet light">
                                         <div class="portlet-title">
                                             <div class="caption">
                                                 <span class="caption-subject bold uppercase">
                                                     分类
                                                     <span ng-if="vm.categoryTree.selectedOu.displayName">: {{vm.categoryTree.selectedOu.displayName}}</span>
                                                 </span>
                                             </div>
                                             @*<div class="actions" ng-if="vm.categoryTree.selectedOu.id">
                                                 <a ng-if="vm.permissions.managecategoryTree" ng-click="vm.members.openAddModal()" class="btn btn-circle btn-default">
                                                     <i class="fa fa-plus"></i> 添加一个资源
                                                 </a>
                                             </div>*@
                                         </div>
                                         <div class="portlet-body">
                                             <div ng-if="vm.categoryTree.selectedOu.id">
                                                 <form class="editCategoryForm">
                                                     <div class="form-group">
                                                         <label>上级分类</label>
                                                         <span>{{vm.categoryTree.selectedParent()}}</span>
                                                     </div>
                                                     <div class="form-group">
                                                         <label>分类ID</label>
                                                         <span>{{vm.categoryTree.selectedOu.id}}</span>
                                                     </div>
                                                     <div class="form-group">
                                                         <label>分类名称</label>
                                                         <input type="text" value="" ng-model="vm.categoryTree.displayName" class="form-control" />
                                                     </div>
                                                     <div class="form-group">
                                                         <label>排序</label>
                                                         <input type="number" value="" ng-model="vm.categoryTree.orderId" class="form-control" />
                                                     </div>
                                                     <div class="form-group editCategory">
                                                         <button class="btn btn-primary" ng-click="vm.categoryTree.editCategory()">保存</button>
                                                     </div>
                                                 </form>
                                             </div>
                                             <div ng-if="!vm.categoryTree.selectedOu.id" class="text-muted">
                                                 选择一个分类添加成员
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>

3：js部分代码

          //#region 操作
             vm.categoryTree = {

                 $tree: null,

                 unitCount: 0,

                 // 设置根节点数量
                 setUnitCount: function (unitCount) {
                     vm.categoryTree.unitCount = unitCount;
                 },

                 refreshUnitCount: function () {
                     vm.categoryTree.setUnitCount(vm.categoryTree.$tree.jstree('get_json').length);
                 },

                 selectedOu: {
                     id: null,
                     displayName: null,
                     code: null,

                     set: function (ouInTree) {

                         if (!ouInTree) {
                             vm.categoryTree.selectedOu.id = null;
                             vm.categoryTree.selectedOu.displayName = null;
                             vm.categoryTree.selectedOu.code = null;
                             vm.categoryTree.selectedOu.parentId = null;
                         } else {
                             vm.categoryTree.selectedOu.id = ouInTree.id;
                             vm.categoryTree.selectedOu.displayName = ouInTree.original.displayName;
                             vm.categoryTree.selectedOu.code = ouInTree.original.code;
                             vm.categoryTree.selectedOu.parentId = ouInTree.parent;
                         }
                     }
                 },

                 // 节点右键菜单列表
                 contextMenu: function (node) {
                     var items = {
                         editUnit: {
                             label: '修改',
                             _disabled: !vm.permissions.managecategoryTree,
                             action: function (data) {
                                 var instance = $.jstree.reference(data.reference);

                                 vm.categoryTree.openCreateOrEditUnitModal({
                                     id: node.id,
                                     displayName: node.original.displayName
                                 }, function (updatedOu) {
                                     node.original.displayName = updatedOu.displayName;
                                     instance.rename_node(node, vm.categoryTree.generateTextOnTree(updatedOu));
                                 });
                             }
                         },

                         addSubUnit: {
                             label: '添加下级分类',
                             _disabled: !vm.permissions.managecategoryTree,
                             action: function () {
                                 vm.categoryTree.addUnit(node.id);
                             }
                         },

                         'delete': {
                             label: '删除',
                             _disabled: !vm.permissions.managecategoryTree,
                             action: function (data) {
                                 abp.message.confirm('确定删除', node.original.displayName, function (isConfirmed) {
                                     if (isConfirmed) {
                                         categoryService.deleteResourceClassAsync(node.id).then(function () { //后台服务获取数据（AngularJs）
                                             abp.notify.success('删除成功');
                                             window.sweetAlert.close();
                                             vm.categoryTree.reload();
                                         });
                                     }
                                 }
                                 );
                             }
                         }
                     }

                     return items;
                 },

                 // 新增节点数
                 addUnit: function (parentId) {

                     var instance = $.jstree.reference(vm.categoryTree.$tree);
                     vm.categoryTree.openCreateOrEditUnitModal({
                         parentId: parentId

                     }, function (newOu) {
                         instance.create_node(
                             parentId ? instance.get_node(parentId) : '#',
                             {
                                 id: newOu.id,
                                 parent: newOu.parentId ? newOu.parentId : '#',
                                 code: newOu.code,
                                 displayName: newOu.displayName,
                                 memberCount: 0,
                                 text: vm.categoryTree.generateTextOnTree(newOu),
                                 state: {
                                     opened: false  // 是否默认展开所有节点
                                 }
                             });

                         vm.categoryTree.refreshUnitCount();
                     });
                 },

                 // 打开模态框 新增或编辑
                 openCreateOrEditUnitModal: function (organizationUnit) {
                     // console.log(organizationUnit);
                     var modalInstance = $uibModal.open({
                         templateUrl: '~/App/Main/views/commoditie/createOrEditCategoryModal.cshtml',
                         controller: 'app.views.commoditie.createOrEditCategoryModal as vm',
                         backdrop: 'static',
                         resolve: {
                             organizationUnit: function () {
                                 return organizationUnit;
                             }
                         }
                     });

                     modalInstance.result.then(function () {

                         vm.categoryTree.reload();

                     });
                 },

                 generateTextOnTree: function (ou) {
                     var itemClass = ou.resourceClassificationChilds.length > 0 ? ' ou-text-has-members' : ' ou-text-no-members';
                     var parentId = ou.parentId == null ? 'top' : ou.parentId;
                     return '<span title="' + ou.code + '" class="ou-text' + itemClass + '" data-ou-id="' + ou.id + '" data-parent-ou-id="' + parentId + '" data-name="' + ou.displayName + '" >' + ou.displayName + ' (<span class="ou-text-resources-count">' + ou.resourceClassificationChilds.length + '</span>) <i class="fa fa-caret-down text-muted"></i></span>';
                 },

                 incrementMemberCount: function (ouId, incrementAmount) {
                     var treeNode = vm.categoryTree.$tree.jstree('get_node', ouId);
                     treeNode.original.memberCount = treeNode.original.memberCount + incrementAmount;
                     vm.categoryTree.$tree.jstree('rename_node', treeNode, vm.categoryTree.generateTextOnTree(treeNode.original));
                 },

                 // 获取数据
                 getTreeDataFromServer: function (callback) {
                     categoryService.getResourceClassificationListAsync({}).then(function (result) {  // 后台服务获取数据（AngularJS）
                         // console.log(result);
                         var treeData = result.data.map((item) => {
                             return {
                                 id: item.id,
                                 parent: item.parentId ? item.parentId : '#',
                                 code: item.code,
                                 displayName: item.displayName,
                                 memberCount: 0, //item.memberCount,
                                 text: vm.categoryTree.generateTextOnTree(item),
                                 state: {
                                     opened: false // 是否默认展开所有节点
                                 }
                             };
                         });

                         callback(treeData);
                     });
                 },
                 // 编辑分类
                 editCategory: function () {
                     var editCategory = {
                         "id": vm.categoryTree.selectedOu.id,
                         "displayName": vm.categoryTree.displayName,
                         "orderId": vm.categoryTree.orderId
                     };
                     var parentId = vm.categoryTree.selectedOu.parentId;
                     parentId == '#' ? parentId = '' : parentId;
                     editCategory.parentId = parentId;
                     if (vm.categoryTree.displayName != undefined && vm.categoryTree.orderId != undefined) {
                         categoryService.updateCategoryAsync(editCategory)
                             .then(function (result) {
                                 abp.notify.info('保存成功');
                                 vm.categoryTree.reload();
                             });
                     } else {
                         abp.message.warn('请输入分类名称或排序值');
                     }
                     // console.log(editCategory);
                 },
                 selectedParent: function () {
                     var selectedParentId = vm.categoryTree.selectedOu.parentId;
                     var parentName;
                     if (selectedParentId == '#') {
                         return '此分类是最顶级分类';
                     } else {
                         parentName = $('[data-ou-id="' + selectedParentId + '"]').attr('data-name');
                         return parentName;
                     }
                 },
                 // 初始化
                 init: function () {
                     vm.categoryTree.getTreeDataFromServer(function (treeData) {
                         vm.categoryTree.setUnitCount(treeData.length);
                         vm.categoryTree.$tree = $('#CategoryEditTree');

                         var jsTreePlugins = [
                             'types',
                             'contextmenu',
                             'wholerow',
                             'sort'
                         ];

                         if (vm.permissions.managecategoryTree) {
                             jsTreePlugins.push('dnd');
                         }

                         vm.categoryTree.$tree.on('changed.jstree', function (e, data) {
                             // console.log(data);
                             $scope.$apply(function () {
                                 if (data.selected.length != 1) {
                                     vm.categoryTree.selectedOu.set(null);
                                 } else {
                                     var selectedNode = data.instance.get_node(data.selected[0]);
                                     vm.categoryTree.selectedOu.set(selectedNode);
                                 }
                             });
                         }).jstree({
                             'core': {
                                 data: treeData,
                                 multiple: false,
                                 check_callback: function (operation, node, node_parent, node_position, more) {
                                     return true;
                                 }
                             },
                             types: {
                                 "default": {
                                     "icon": "fa fa-folder tree-item-icon-color icon-lg"
                                 },
                                 "file": {
                                     "icon": "fa fa-file tree-item-icon-color icon-lg"
                                 }
                             },
                             contextmenu: {
                                 items: vm.categoryTree.contextMenu
                             },
                             sort: function (node1, node2) {
                                 if (this.get_node(node2).original.displayName < this.get_node(node1).original.displayName) {
                                     return 1;
                                 }

                                 return -1;
                             },
                             plugins: jsTreePlugins
                         });

                         vm.categoryTree.$tree.on('click', '.ou-text .fa-caret-down', function (e) {
                             e.preventDefault();

                             var ouId = $(this).closest('.ou-text').attr('data-ou-id');
                             setTimeout(function () {
                                 vm.categoryTree.$tree.jstree('show_contextmenu', ouId);
                             }, 100);
                         });

                     });
                 },

                 reload: function () {
                     vm.categoryTree.getTreeDataFromServer(function (treeData) {
                         vm.categoryTree.setUnitCount(treeData.length);
                         vm.categoryTree.$tree.jstree(true).settings.core.data = treeData;
                         vm.categoryTree.$tree.jstree('refresh');
                     });
                 }
             };
             //#endregion
             vm.categoryTree.init();