jsTree树形菜单分类

 1 ?<div class="row"> 2 ????????????????????????????????<div class="col-lg-6 border_solid first_border_solid"> 3 ????????????????????????????????????<div class="portlet light"> 4 ????????????????????????????????????????<div class="portlet-title"> 5 ????????????????????????????????????????????<div class="caption"> 6 ????????????????????????????????????????????????<span class="caption-subject bold uppercase"> 7 ????????????????????????????????????????????????????树形菜单分类 8 ????????????????????????????????????????????????</span> 9 ????????????????????????????????????????????????<a ng-if="vm.permissions.managecategoryTree" ng-click="vm.categoryTree.addUnit(null)" class="btn btn-primary">10 ????????????????????????????????????????????????????<i class="fa fa-plus"></i> 新增资源分类11 ????????????????????????????????????????????????</a>12 ????????????????????????????????????????????</div>13 ????????????????????????????????????????</div>14 ????????????????????????????????????????<div class="portlet-body">15 ????????????????????????????????????????????<div id="CategoryEditTree"></div>16 ????????????????????????????????????????????<div ng-if="!vm.categoryTree.unitCount" class="text-muted">17 ????????????????????????????????????????????????当前没有资源分类信息18 ????????????????????????????????????????????</div>19 ????????????????????????????????????????</div>20 ????????????????????????????????????</div>21 ????????????????????????????????</div>22 ????????????????????????????????<div class="col-lg-5 border_solid second_border_solid">23 ????????????????????????????????????<div class="portlet light">24 ????????????????????????????????????????<div class="portlet-title">25 ????????????????????????????????????????????<div class="caption">26 ????????????????????????????????????????????????<span class="caption-subject bold uppercase">27 ????????????????????????????????????????????????????分类28 ????????????????????????????????????????????????????<span ng-if="vm.categoryTree.selectedOu.displayName">: {{vm.categoryTree.selectedOu.displayName}}</span>29 ????????????????????????????????????????????????</span>30 ????????????????????????????????????????????</div>31 ????????????????????????????????????????????@*<div class="actions" ng-if="vm.categoryTree.selectedOu.id">32 ????????????????????????????????????????????????<a ng-if="vm.permissions.managecategoryTree" ng-click="vm.members.openAddModal()" class="btn btn-circle btn-default">33 ????????????????????????????????????????????????????<i class="fa fa-plus"></i> 添加一个资源34 ????????????????????????????????????????????????</a>35 ????????????????????????????????????????????</div>*@36 ????????????????????????????????????????</div>37 ????????????????????????????????????????<div class="portlet-body">38 ????????????????????????????????????????????<div ng-if="vm.categoryTree.selectedOu.id">39 ????????????????????????????????????????????????<form class="editCategoryForm">40 ????????????????????????????????????????????????????<div class="form-group">41 ????????????????????????????????????????????????????????<label>上级分类</label>42 ????????????????????????????????????????????????????????<span>{{vm.categoryTree.selectedParent()}}</span>43 ????????????????????????????????????????????????????</div>44 ????????????????????????????????????????????????????<div class="form-group">45 ????????????????????????????????????????????????????????<label>分类ID</label>46 ????????????????????????????????????????????????????????<span>{{vm.categoryTree.selectedOu.id}}</span>47 ????????????????????????????????????????????????????</div>48 ????????????????????????????????????????????????????<div class="form-group">49 ????????????????????????????????????????????????????????<label>分类名称</label>50 ????????????????????????????????????????????????????????<input type="text" value="" ng-model="vm.categoryTree.displayName" class="form-control" />51 ????????????????????????????????????????????????????</div>52 ????????????????????????????????????????????????????<div class="form-group">53 ????????????????????????????????????????????????????????<label>排序</label>54 ????????????????????????????????????????????????????????<input type="number" value="" ng-model="vm.categoryTree.orderId" class="form-control" />55 ????????????????????????????????????????????????????</div>56 ????????????????????????????????????????????????????<div class="form-group editCategory">57 ????????????????????????????????????????????????????????<button class="btn btn-primary" ng-click="vm.categoryTree.editCategory()">保存</button>58 ????????????????????????????????????????????????????</div>59 ????????????????????????????????????????????????</form>60 ????????????????????????????????????????????</div>61 ????????????????????????????????????????????<div ng-if="!vm.categoryTree.selectedOu.id" class="text-muted">62 ????????????????????????????????????????????????选择一个分类添加成员63 ????????????????????????????????????????????</div>64 ????????????????????????????????????????</div>65 ????????????????????????????????????</div>66 ????????????????????????????????</div>67 ????????????????????????????</div>

 ?1 ?????????//#region 操作 ?2 ????????????vm.categoryTree = { ?3 ??4 ????????????????$tree: null, ?5 ??6 ????????????????unitCount: 0, ?7 ??8 ????????????????// 设置根节点数量 ?9 ????????????????setUnitCount: function (unitCount) { 10 ????????????????????vm.categoryTree.unitCount = unitCount; ?12 ????????????????}, 13 ?14 ????????????????refreshUnitCount: function () { 15 ????????????????????vm.categoryTree.setUnitCount(vm.categoryTree.$tree.jstree(‘get_json‘).length); 16 ????????????????}, 17 ?18 ????????????????selectedOu: { 19 ????????????????????id: null, 20 ????????????????????displayName: null, 21 ????????????????????code: null, 22 ?23 ????????????????????set: function (ouInTree) { 24 ?25 ????????????????????????if (!ouInTree) { 26 ????????????????????????????vm.categoryTree.selectedOu.id = null; 27 ????????????????????????????vm.categoryTree.selectedOu.displayName = null; 28 ????????????????????????????vm.categoryTree.selectedOu.code = null; 29 ????????????????????????????vm.categoryTree.selectedOu.parentId = null; 30 ????????????????????????} else { 31 ????????????????????????????vm.categoryTree.selectedOu.id = ouInTree.id; 32 ????????????????????????????vm.categoryTree.selectedOu.displayName = ouInTree.original.displayName; 33 ????????????????????????????vm.categoryTree.selectedOu.code = ouInTree.original.code; 34 ????????????????????????????vm.categoryTree.selectedOu.parentId = ouInTree.parent; 35 ????????????????????????} 36 ????????????????????} 37 ????????????????}, 38 ?39 ????????????????// 节点右键菜单列表 40 ????????????????contextMenu: function (node) { 41 ????????????????????var items = { 42 ????????????????????????editUnit: { 43 ????????????????????????????label: ‘修改‘, 44 ????????????????????????????_disabled: !vm.permissions.managecategoryTree, 45 ????????????????????????????action: function (data) { 46 ????????????????????????????????var instance = $.jstree.reference(data.reference); 47 ?48 ????????????????????????????????vm.categoryTree.openCreateOrEditUnitModal({ 49 ????????????????????????????????????id: node.id, 50 ????????????????????????????????????displayName: node.original.displayName 51 ????????????????????????????????}, function (updatedOu) { 52 ????????????????????????????????????node.original.displayName = updatedOu.displayName; 53 ????????????????????????????????????instance.rename_node(node, vm.categoryTree.generateTextOnTree(updatedOu)); 54 ????????????????????????????????}); 55 ????????????????????????????} 56 ????????????????????????}, 57 ?58 ????????????????????????addSubUnit: { 59 ????????????????????????????label: ‘添加下级分类‘, 60 ????????????????????????????_disabled: !vm.permissions.managecategoryTree, 61 ????????????????????????????action: function () { 62 ????????????????????????????????vm.categoryTree.addUnit(node.id); 63 ????????????????????????????} 64 ????????????????????????}, 65 ??73 ?74 ????????????????????????‘delete‘: { 75 ????????????????????????????label: ‘删除‘, 76 ????????????????????????????_disabled: !vm.permissions.managecategoryTree, 77 ????????????????????????????action: function (data) { 78 ????????????????????????????????abp.message.confirm(‘确定删除‘, node.original.displayName, function (isConfirmed) { 79 ????????????????????????????????????if (isConfirmed) { 80 ????????????????????????????????????????categoryService.deleteResourceClassAsync(node.id).then(function () { //后台服务获取数据（AngularJs） 81 ????????????????????????????????????????????abp.notify.success(‘删除成功‘); 82 ????????????????????????????????????????????window.sweetAlert.close(); 83 ????????????????????????????????????????????vm.categoryTree.reload(); 84 ????????????????????????????????????????}); 85 ????????????????????????????????????} 86 ????????????????????????????????} 87 ????????????????????????????????); 88 ????????????????????????????} 89 ????????????????????????} 90 ????????????????????} 91 ?92 ????????????????????return items; 93 ????????????????}, 94 ?95 ????????????????// 新增节点数 96 ????????????????addUnit: function (parentId) { 97 ?98 ????????????????????var instance = $.jstree.reference(vm.categoryTree.$tree); 99 ????????????????????vm.categoryTree.openCreateOrEditUnitModal({100 ????????????????????????parentId: parentId101 102 ????????????????????}, function (newOu) {103 ????????????????????????instance.create_node(104 ????????????????????????????parentId ? instance.get_node(parentId) : ‘#‘,105 ????????????????????????????{106 ????????????????????????????????id: newOu.id,107 ????????????????????????????????parent: newOu.parentId ? newOu.parentId : ‘#‘,108 ????????????????????????????????code: newOu.code,109 ????????????????????????????????displayName: newOu.displayName,110 ????????????????????????????????memberCount: 0,111 ????????????????????????????????text: vm.categoryTree.generateTextOnTree(newOu),112 ????????????????????????????????state: {113 ????????????????????????????????????opened: false ?// 是否默认展开所有节点114 ????????????????????????????????}115 ????????????????????????????});116 117 ????????????????????????vm.categoryTree.refreshUnitCount();118 ????????????????????});119 ????????????????},120 121 ????????????????// 打开模态框 新增或编辑122 ????????????????openCreateOrEditUnitModal: function (organizationUnit) {123 ????????????????????// console.log(organizationUnit);124 ????????????????????var modalInstance = $uibModal.open({125 ????????????????????????templateUrl: ‘~/App/Main/views/commoditie/createOrEditCategoryModal.cshtml‘,126 ????????????????????????controller: ‘app.views.commoditie.createOrEditCategoryModal as vm‘,127 ????????????????????????backdrop: ‘static‘,128 ????????????????????????resolve: {129 ????????????????????????????organizationUnit: function () {130 ????????????????????????????????return organizationUnit;131 ????????????????????????????}132 ????????????????????????}133 ????????????????????});134 135 ????????????????????modalInstance.result.then(function () {136 137 ????????????????????????vm.categoryTree.reload();138 139 ????????????????????});140 ????????????????},141 142 ????????????????generateTextOnTree: function (ou) {143 ????????????????????var itemClass = ou.resourceClassificationChilds.length > 0 ? ‘ ou-text-has-members‘ : ‘ ou-text-no-members‘;144 ????????????????????var parentId = ou.parentId == null ? ‘top‘ : ou.parentId;145 ????????????????????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>‘;146 ????????????????},147 148 ????????????????incrementMemberCount: function (ouId, incrementAmount) {149 ????????????????????var treeNode = vm.categoryTree.$tree.jstree(‘get_node‘, ouId);150 ????????????????????treeNode.original.memberCount = treeNode.original.memberCount + incrementAmount;151 ????????????????????vm.categoryTree.$tree.jstree(‘rename_node‘, treeNode, vm.categoryTree.generateTextOnTree(treeNode.original));152 ????????????????},153 154 ????????????????// 获取数据155 ????????????????getTreeDataFromServer: function (callback) { 156 ????????????????????categoryService.getResourceClassificationListAsync({}).then(function (result) { ?// 后台服务获取数据（AngularJS）157 ????????????????????????// console.log(result);158 ????????????????????????var treeData = result.data.map((item) => {159 ????????????????????????????return {160 ????????????????????????????????id: item.id,161 ????????????????????????????????parent: item.parentId ? item.parentId : ‘#‘,162 ????????????????????????????????code: item.code,163 ????????????????????????????????displayName: item.displayName,164 ????????????????????????????????memberCount: 0, //item.memberCount,165 ????????????????????????????????text: vm.categoryTree.generateTextOnTree(item),166 ????????????????????????????????state: {167 ????????????????????????????????????opened: false // 是否默认展开所有节点168 ????????????????????????????????}169 ????????????????????????????};170 ????????????????????????});171 172 ????????????????????????callback(treeData);173 ????????????????????});174 ????????????????},175 ????????????????// 编辑分类176 ????????????????editCategory: function () {177 ????????????????????var editCategory = {178 ????????????????????????"id": vm.categoryTree.selectedOu.id,179 ????????????????????????"displayName": vm.categoryTree.displayName,180 ????????????????????????"orderId": vm.categoryTree.orderId181 ????????????????????};182 ????????????????????var parentId = vm.categoryTree.selectedOu.parentId;183 ????????????????????parentId == ‘#‘ ? parentId = ‘‘ : parentId;184 ????????????????????editCategory.parentId = parentId;185 ????????????????????if (vm.categoryTree.displayName != undefined && vm.categoryTree.orderId != undefined) {186 ????????????????????????categoryService.updateCategoryAsync(editCategory)187 ????????????????????????????.then(function (result) {188 ????????????????????????????????abp.notify.info(‘保存成功‘);189 ????????????????????????????????vm.categoryTree.reload();190 ????????????????????????????});191 ????????????????????} else {192 ????????????????????????abp.message.warn(‘请输入分类名称或排序值‘);193 ????????????????????}194 ????????????????????// console.log(editCategory);195 ????????????????},196 ????????????????selectedParent: function () {197 ????????????????????var selectedParentId = vm.categoryTree.selectedOu.parentId;198 ????????????????????var parentName;199 ????????????????????if (selectedParentId == ‘#‘) {200 ????????????????????????return ‘此分类是最顶级分类‘;201 ????????????????????} else {202 ????????????????????????parentName = $(‘[data-ou-id="‘ + selectedParentId + ‘"]‘).attr(‘data-name‘);203 ????????????????????????return parentName;204 ????????????????????}205 ????????????????},206 ????????????????// 初始化207 ????????????????init: function () {208 ????????????????????vm.categoryTree.getTreeDataFromServer(function (treeData) {209 ????????????????????????vm.categoryTree.setUnitCount(treeData.length);210 ????????????????????????vm.categoryTree.$tree = $(‘#CategoryEditTree‘);211 212 ????????????????????????var jsTreePlugins = [213 ????????????????????????????‘types‘,214 ????????????????????????????‘contextmenu‘,215 ????????????????????????????‘wholerow‘,216 ????????????????????????????‘sort‘217 ????????????????????????];218 219 ????????????????????????if (vm.permissions.managecategoryTree) {220 ????????????????????????????jsTreePlugins.push(‘dnd‘);221 ????????????????????????}222 223 ????????????????????????vm.categoryTree.$tree.on(‘changed.jstree‘, function (e, data) {224 ????????????????????????????// console.log(data);225 ????????????????????????????$scope.$apply(function () {226 ????????????????????????????????if (data.selected.length != 1) {227 ????????????????????????????????????vm.categoryTree.selectedOu.set(null);228 ????????????????????????????????} else {229 ????????????????????????????????????var selectedNode = data.instance.get_node(data.selected[0]);230 ????????????????????????????????????vm.categoryTree.selectedOu.set(selectedNode);231 ????????????????????????????????}232 ????????????????????????????});233 ????????????????????????}).jstree({234 ????????????????????????????‘core‘: {235 ????????????????????????????????data: treeData,236 ????????????????????????????????multiple: false,237 ????????????????????????????????check_callback: function (operation, node, node_parent, node_position, more) {238 ????????????????????????????????????return true;239 ????????????????????????????????}240 ????????????????????????????},241 ????????????????????????????types: {242 ????????????????????????????????"default": {243 ????????????????????????????????????"icon": "fa fa-folder tree-item-icon-color icon-lg"244 ????????????????????????????????},245 ????????????????????????????????"file": {246 ????????????????????????????????????"icon": "fa fa-file tree-item-icon-color icon-lg"247 ????????????????????????????????}248 ????????????????????????????},249 ????????????????????????????contextmenu: {250 ????????????????????????????????items: vm.categoryTree.contextMenu251 ????????????????????????????},252 ????????????????????????????sort: function (node1, node2) {253 ????????????????????????????????if (this.get_node(node2).original.displayName < this.get_node(node1).original.displayName) {254 ????????????????????????????????????return 1;255 ????????????????????????????????}256 257 ????????????????????????????????return -1;258 ????????????????????????????},259 ????????????????????????????plugins: jsTreePlugins260 ????????????????????????});261 262 ????????????????????????vm.categoryTree.$tree.on(‘click‘, ‘.ou-text .fa-caret-down‘, function (e) {263 ????????????????????????????e.preventDefault();264 265 ????????????????????????????var ouId = $(this).closest(‘.ou-text‘).attr(‘data-ou-id‘);266 ????????????????????????????setTimeout(function () {267 ????????????????????????????????vm.categoryTree.$tree.jstree(‘show_contextmenu‘, ouId);268 ????????????????????????????}, 100);269 ????????????????????????});270 271 ????????????????????});272 ????????????????},273 274 ????????????????reload: function () {275 ????????????????????vm.categoryTree.getTreeDataFromServer(function (treeData) {276 ????????????????????????vm.categoryTree.setUnitCount(treeData.length);277 ????????????????????????vm.categoryTree.$tree.jstree(true).settings.core.data = treeData;278 ????????????????????????vm.categoryTree.$tree.jstree(‘refresh‘);279 ????????????????????});280 ????????????????}281 ????????????}; 288 ????????????//#endregion 289 ????????????vm.categoryTree.init();