如何在不刷新整个页面的情况下更新树？答案

【问题标题】：How to update a tree without refreshing whole page?如何在不刷新整个页面的情况下更新树？
【发布时间】：2020-12-25 17:17:05
【问题描述】：

我正在使用 zTree 创建 Web 应用程序。该树是基于来自 Golang 后端的数据构建的。应用程序运行时树叶会更改自定义图标。如何在不刷新页面的情况下根据后端数据更改图标？

使用 http-equiv="refresh" 页面闪烁并失去焦点。这是使用 zTree 和刷新的工作但闪烁的示例（为简单起见，我剪切了后端部分）：

<HTML>
<HEAD>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="refresh" content="5">
    <link rel="stylesheet" href="../static/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../static/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery.ztree.core.js"></script>
</HEAD>

<BODY>
    <div id="app">
        <TABLE>
            <TR>
                <TD width=260px valign=top>
                    <ul id="tree" class="ztree"></ul>
                </TD>
                <TD valign=top>
                    <p>Some text</p>
                </TD>
            </TR>
        </TABLE>
        
        <SCRIPT type="text/javascript">
            var zTree;
            var setting = {
                data: {
                    simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                    }
                }
            };
            var zNodes = [
                {id: 1, pId: 0, name: "root", icon:"../static/css/zTreeStyle/img/diy/c16green.png"},
                {id: 2, pId: 1, name: "leaf", icon:"../static/css/zTreeStyle/img/diy/c16red.png"},
            ];
            $(document).ready(function () {
                var t = $("#tree");
                t = $.fn.zTree.init(t, setting, zNodes);
            });
        </script>
    </div>
</BODY>
</HTML>

我尝试使用 Vue.js，但无法将数据绑定到 zTree。这是脚本标记内的 Vue.js 数据绑定不起作用的示例：

<HTML>
<HEAD>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../static/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../static/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery.ztree.core.js"></script>
    <script src="https://unpkg.com/vue"></script>
</HEAD>

<BODY>
    <div id="app">
        <TABLE>
            <TR>
                <TD width=260px valign=top>
                    <ul id="tree" class="ztree"></ul>
                </TD>
                <TD valign=top>
                    <p>{{ now }}</p>
                    <p>Some text</p>
                </TD>
            </TR>
        </TABLE>
        
        <SCRIPT type="text/javascript">
            var zTree;
            var setting = {
                data: {
                    simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                    }
                }
            };
            var zNodes = [
                {id: 1, pId: 0, name: "root", icon:"../static/css/zTreeStyle/img/diy/c16green.png"},
                {id: 2, pId: 1, name: "leaf", icon:"../static/css/zTreeStyle/img/diy/c16red.png"},
                {id: 3, pId: 1, name: "foo", icon: {{ customIcon }} },
            ];
            $(document).ready(function () {
                var t = $("#tree");
                t = $.fn.zTree.init(t, setting, zNodes);
            });
        
            const app = new Vue({
                el: '#app',
                data: {
                    now: new Date(),
                    customIcon : "../static/css/zTreeStyle/img/diy/c16green.png"
                },
                methods: {
                    updateDate() {
                        this.now = new Date();
                    }
                },
                mounted() {
                    setInterval(() => {
                        this.updateDate();
                    }, 1000);
                },
            })
        </script>
    </div>
</BODY>
</HTML>

压缩示例（示例在模板目录中）：https://drive.google.com/file/d/1Ihv8jLdsEz93aUrFjEugD1l6YvslaUT8

【问题讨论】：

标签： javascript vue.js ztree

【解决方案1】：

解决方案包含几个步骤：

使用“go-echo-vue”在后端和前端之间进行通信，如下所示：https://github.com/covrom/go-echo-vue

像这样使用 vue-resource 和计时器更新 zTree 数据：

 <script>
 new Vue({
     // ....
     methods: {
         updateZNodes() {
             // запрашиваем дерево :)
             this.$http.get('/znodes').then(function (response) {
                 zNodes = response.data.items ? response.data.items : []
             }, function (error) {
                 console.log(error)
             });
         },
     },
     mounted() {
         setInterval(() => {
             this.updateZNodes();
         }, 5000);
     },
     // ....
 })</script>

使用js刷新zTree节点信息：

 <script language="JavaScript">
         function refreshNode() {
         var treeObj = $.fn.zTree.getZTreeObj("tree");
         var nodes = treeObj.getNodes();
         if (nodes.length > 0) {
             for (let i = 0; i < nodes.length; i++) {
                 c = "static/css/zTreeStyle/img/diy/c16grey.png";
                 if (zNodes.length >= i) {
                     c = zNodes[i].icon
                 }
                 nodes[i].icon = c;
                 treeObj.updateNode(nodes[i]);
             }
         }
     };

     const timerId = setInterval(
         () => {
             refreshNode();
         },
         5000
     );
 </script>

添加异步 zTree 设置：

 <script language="JavaScript">
     var setting = {
         // ....
         async: {
             enable: true,
             url: "",
             autoparam: ["id", "icon"],
             datatype: "json",
         },
         // ....
     };
 </script>

就是这样。所以我们有 Vue 函数 http.get 从后端获取新数据，全局 js 变量在 Vue 代码段和 JavaScript 块中使用该数据。

PS附加信息：https://www.tutorialfor.com/blog-188266.htm

【讨论】：