这里我演示的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();