[Feature] 使用ztree

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({
+            d = {
                 "id": node.id,
-                "parent": parent,
-                "text": node.name
-            })
+                "pId": parent,
+                "name": node.name
+            }
+            if node.id == "0":
+                d["open"] = True
+            data.append(d)
         return Response(data)

apps/assets/templates/assets/tree.html

@@ -4,6 +4,20 @@
 
 {% block custom_head_css_js %}
     <link href="{% static 'css/plugins/jstree/style.min.css' %}" rel="stylesheet">
+    <link href="{% static 'css/plugins/ztree/ztreestyle/ztreestyle.css' %}" rel="stylesheet">
+{#    <link href="{% static 'css/plugins/ztree/demo.css' %}" rel="stylesheet">#}
+    <script type="text/javascript" src="{% static 'js/plugins/ztree/jquery.ztree.all.min.js' %}"></script>
+    <script type="text/javascript">
+		$(document).ready(function(){
+
+		});
+	</script>
+	<style type="text/css">
+        .ztree li span.button.add {
+            margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle
+        }
+	</style>
+
 {% endblock %}
 
 {% block content %}
@@ -14,7 +28,7 @@
                <div class="ibox-content mailbox-content">
                    <div class="file-manager">
                        <h5>Tree View</h5>
-                       <div id="jstree">
+                       <div id="treeDemo" class="ztree">
                        </div>
                        <div class="clearfix"></div>
                    </div>
@@ -22,8 +36,9 @@
            </div>
        </div>
        <div class="col-lg-9 animated fadeInRight">
+           <div class="row">
                <div class="mail-box-header">
-               <div class="uc pull-left m-r-5"><a href="{% url "assets:asset-create" %}" class="btn btn-sm btn-primary"> {% trans "Create asset" %} </a></div>
+                   <div class="uc pull-left m-r-5"><a href="{% url "assets:asset-create" %}" class="btn btn-sm btn-primary"> {% trans "Add asset" %} </a></div>
                    <div class="btn-group" style="float: right">
                        <button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle">{% trans 'Label' %} <span class="caret"></span></button>
                        <ul class="dropdown-menu labels">
@@ -66,6 +81,10 @@
                    </div>
                </div>
            </div>
+           <div class="row">
+           </div>
+
+       </div>
    </div>
 </div>
 {% endblock %}
@@ -121,46 +140,154 @@
             op_html: $('#actions').html()
         };
         return jumpserver.initServerSideDataTable(options);
+    }
 
+    function beforeDrag(treeId, treeNodes) {
+        showLog("Before drag");
+        return false;
     }
-    $(document).ready(function(){
-        initTable();
-        $('#jstree').jstree({
-            'core' : {
-                'check_callback' : true,
-                'data': {
-                    'url': '{% url "api-assets:tree-view" %}',
-                    'data': function (node) {
-                        return {'id': node.id}
+
+    function beforeEditName(treeId, treeNode) {
+        showLog("Before edit name");
+        className = (className === "dark" ? "" : "dark");
+        showLog("[ " + getTime() + " beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + 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 ]&nbsp;&nbsp;&nbsp;&nbsp; " + 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 ? "<span style='color:red'>" : "") + "[ " + getTime() + " beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>" : ""));
+        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 ? "<span style='color:red'>" : "") + "[ " + getTime() + " onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>" : ""));#}
+    }
+
+    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 = "<span class='button add' id='addBtn_" + treeNode.tId
+            + "' title='add node' onfocus='this.blur();'></span>";
+        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
             },
-            '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'
+            edit: {
+                enable: true,
+                editNameSelectAll: true,
+                showRemoveBtn: showRemoveBtn,
+                showRenameBtn: showRenameBtn
             },
-                'img' : {
-                    'icon' : 'fa fa-file-image-o'
+            data: {
+                simpleData: {
+                    enable: true
+                }
             },
-                'js' : {
-                    'icon' : 'fa fa-file-text-o'
+            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();
+        initTree();
     });
-    })
 </script>
 
 {% endblock %}
\ No newline at end of file

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)