文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在不刷新整页的情况下更新树？

问如何在不刷新整页的情况下更新树？
EN

Stack Overflow用户

提问于 2020-12-25 17:17:05

回答 1查看 245关注 0票数 0

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

随着http-equiv=“刷新”页面的闪烁和失去焦点。下面是使用zTree和refresh的示例(为了简单起见，我切割后端部分)：

<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

Stack Overflow用户

回答已采纳

发布于 2021-02-26 09:54:30

该解决方案包含几个步骤：

在后端和前端之间使用"go-echo-vue“进行通信，如：https://github.com/covrom/go-echo-vue
使用vue资源和计时器更新zTree数据，如下所示：
使用js重新填充zTree节点信息：
添加异步zTree设置：

就这样。因此，我们使用Vue函数http.get从后端全局js变量获得新的数据，以便在Vue代码段和JavaScript块中使用这些数据。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65450183

复制

相似问题

问如何在不刷新整页的情况下更新树？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在不刷新整页的情况下更新树？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在不刷新整页的情况下更新树？
EN