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

问题描述

我正在使用 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,{id: 3,name: "foo",icon: {{ customIcon }} },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

解决方法

解决方案包含几个步骤：

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

像这样使用 vue-resource 和 timer 更新 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

javascript vue.js ztree ztree