diff --git a/apps/assets/api.py b/apps/assets/api.py index c61bf1e83..31577ec18 100644 --- a/apps/assets/api.py +++ b/apps/assets/api.py @@ -319,13 +319,13 @@ class TreeViewApi(APIView): def get(self, request): data = [] for node in self.get_queryset(): - if node.id == "0": - parent = "#" - else: - parent = ":".join(node.id.split(":")[:-1]) - data.append({ + parent = ":".join(node.id.split(":")[:-1]) + d = { "id": node.id, - "parent": parent, - "text": node.name - }) - return Response(data) \ No newline at end of file + "pId": parent, + "name": node.name + } + if node.id == "0": + d["open"] = True + data.append(d) + return Response(data) diff --git a/apps/assets/templates/assets/tree.html b/apps/assets/templates/assets/tree.html index acca9462c..d9796b592 100644 --- a/apps/assets/templates/assets/tree.html +++ b/apps/assets/templates/assets/tree.html @@ -4,6 +4,20 @@ {% block custom_head_css_js %} + +{# #} + + + + {% endblock %} {% block content %} @@ -14,7 +28,7 @@
Tree View
-
+
@@ -22,49 +36,54 @@
-
-
{% trans "Create asset" %}
-
- - -
- - - - - - - - - - - - - - - - -
{% trans 'Hostname' %}{% trans 'IP' %}{% trans 'Port' %}{% trans 'Cluster' %}{% trans 'Hardware' %}{% trans 'Active' %}{% trans 'Reachable' %}{% trans 'Action' %}
-
-
- -
- +
+
+
{% trans "Add asset" %}
+
+ + +
+ + + + + + + + + + + + + + + + +
{% trans 'Hostname' %}{% trans 'IP' %}{% trans 'Port' %}{% trans 'Cluster' %}{% trans 'Hardware' %}{% trans 'Active' %}{% trans 'Reachable' %}{% trans 'Action' %}
+
+
+ +
+ +
+
+
+
@@ -121,46 +140,154 @@ op_html: $('#actions').html() }; return jumpserver.initServerSideDataTable(options); + } + function beforeDrag(treeId, treeNodes) { + showLog("Before drag"); + return false; + } + + function beforeEditName(treeId, treeNode) { + showLog("Before edit name"); + className = (className === "dark" ? "" : "dark"); + showLog("[ " + getTime() + " beforeEditName ]     " + treeNode.name); + var zTree = $.fn.zTree.getZTreeObj("treeDemo"); + zTree.selectNode(treeNode); + setTimeout(function () { + if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？")) { + setTimeout(function () { + zTree.editName(treeNode); + }, 0); + } + }, 0); + return false; + } + + function beforeRemove(treeId, treeNode) { + showLog("[ " + getTime() + " beforeRemove ]     " + treeNode.name); + className = (className === "dark" ? "" : "dark"); + var zTree = $.fn.zTree.getZTreeObj("treeDemo"); + zTree.selectNode(treeNode); + return confirm("确认删除 节点 -- " + treeNode.name + " 吗？"); + } + + function onRemove(e, treeId, treeNode) { + showLog("Remove node") + } + + function beforeRename(treeId, treeNode, newName, isCancel) { + showLog((isCancel ? "" : "") + "[ " + getTime() + " beforeRename ]     " + treeNode.name + (isCancel ? "" : "")); + className = (className === "dark" ? "" : "dark"); + if (newName.length == 0) { + setTimeout(function () { + var zTree = $.fn.zTree.getZTreeObj("treeDemo"); + zTree.cancelEditName(); + alert("节点名称不能为空."); + }, 0); + return false; + } + return true; + } + + function onRename(e, treeId, treeNode, isCancel) { + console.log("On remname"); + {#showLog((isCancel ? "" : "") + "[ " + getTime() + " onRename ]     " + treeNode.name + (isCancel ? "" : ""));#} + } + + function showRemoveBtn(treeId, treeNode) { + showLog("Show remove btn"); + return !treeNode.isFirstNode; + } + + function showRenameBtn(treeId, treeNode) { + showLog("Show rename btn"); + return !treeNode.isLastNode; + } + + function showLog(str) { + console.log(str) + } + + function getTime() { + var now = new Date(), + h = now.getHours(), + m = now.getMinutes(), + s = now.getSeconds(), + ms = now.getMilliseconds(); + return (h + ":" + m + ":" + s + " " + ms); + } + + var newCount = 1; + + function addHoverDom(treeId, treeNode) { + var sObj = $("#" + treeNode.tId + "_span"); + if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return; + var addStr = ""; + sObj.after(addStr); + var btn = $("#addBtn_" + treeNode.tId); + if (btn) btn.bind("click", function () { + var zTree = $.fn.zTree.getZTreeObj("treeDemo"); + zTree.addNodes(treeNode, { + id: (100 + newCount), + pId: treeNode.id, + name: "new node" + (newCount++) + }); + return false; + }); + }; + + function removeHoverDom(treeId, treeNode) { + showLog("Remove hove dom"); + $("#addBtn_" + treeNode.tId).unbind().remove(); + }; + + function selectAll() { + var zTree = $.fn.zTree.getZTreeObj("treeDemo"); + zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked"); + } + + function initTree() { + var setting = { + view: { + addHoverDom: addHoverDom, + removeHoverDom: removeHoverDom, + selectedMulti: false + }, + edit: { + enable: true, + editNameSelectAll: true, + showRemoveBtn: showRemoveBtn, + showRenameBtn: showRenameBtn + }, + data: { + simpleData: { + enable: true + } + }, + callback: { + beforeDrag: beforeDrag, + beforeEditName: beforeEditName, + beforeRemove: beforeRemove, + beforeRename: beforeRename, + onRemove: onRemove, + onRename: onRename + } + }; + + var zNodes = []; + $.get("{% url 'api-assets:tree-view' %}", function(data, status){ + zNodes = data; + console.log(data); + console.log(status); + $.fn.zTree.init($("#treeDemo"), setting, zNodes); + }); + $("#selectAll").bind("click", selectAll); } $(document).ready(function(){ initTable(); - $('#jstree').jstree({ - 'core' : { - 'check_callback' : true, - 'data': { - 'url': '{% url "api-assets:tree-view" %}', - 'data': function (node) { - return {'id': node.id} - } - } - }, - 'plugins' : [ 'types', 'dnd'], - "checkbox" : { - "keep_selected_style" : true - }, - 'types' : { - 'default' : { - 'icon' : 'fa fa-folder' - }, - 'html' : { - 'icon' : 'fa fa-file-code-o' - }, - 'svg' : { - 'icon' : 'fa fa-file-picture-o' - }, - 'css' : { - 'icon' : 'fa fa-file-code-o' - }, - 'img' : { - 'icon' : 'fa fa-file-image-o' - }, - 'js' : { - 'icon' : 'fa fa-file-text-o' - } - } - }); - }) + initTree(); + }); {% endblock %} \ No newline at end of file diff --git a/apps/assets/views/tree.py b/apps/assets/views/tree.py index 60213e85a..707662851 100644 --- a/apps/assets/views/tree.py +++ b/apps/assets/views/tree.py @@ -16,7 +16,7 @@ class TreeView(AdminUserRequiredMixin, TemplateView): def get_context_data(self, **kwargs): context = { 'app': _('Assets'), - 'action': _('TreeView view'), + 'action': _('Tree view'), } kwargs.update(context) return super().get_context_data(**kwargs)