[Bug]子项目为jquery项目，domready之后，内部动态渲染了ztree，可是在切换一次子项目路由之后，jquery项目中的ztree没有重新加载了。 #393

mowatermelon · 2020-04-03T03:00:18Z

What happens?

子项目为jquery项目和vue项目，vue子项目中用了vue-giant-tree，jquery子项目中用了ztree，默认加载的是vue项目，初始点击jquery项目这边ztree正常加载了，切换回vue项目，再回到jquery项目，页面没有加载ztree了，页面也没有报错。

最小可复现仓库

https://github.com/mowatermelon/test-qiankun-pureHtml/tree/jquery

复现步骤，错误日志以及相关配置

yarn,安装项目依赖
yarn dev:i,安装父子项目依赖
yarn dev:s,启动服务
默认进入的是vue/about，vue-giant-tree正常渲染。
点击q-purehtml，页面ztree正常渲染完毕（不知道为啥页面的ztree的图标没渲染出来）。
切换到vue节点，vue项目的vue-giant-tree也正常渲染。
切换回q-purehtml，页面ztree未渲染，页面控制台没有报错。

现有效果

main/index.html

        <li onclick="push('/vue/About')">Vue</li>
        <li onclick="push('/q-purehtml')">Purehtml-q</li>

purehtml-q/index.html

<body>
 <h1>jquery  hello!</h1>
 <div id="ztreeDemo" class='ztree'></div>
  
  <!--引入Js文件-->
  
  <script src="./plugins/jQuery/jquery.min.js"></script>
  <script src="./plugins/zTree.min/js/jquery.ztree.core.min.js"></script>
  <script src="./plugins/zTree.min/js/jquery.ztree.exhide.min.js"></script>
  <script src="./plugins/zTree.min/js/jquery.ztree.excheck.min.js"></script>
  <script src="./plugins/zTree.min/js/jquery.ztree.exedit.min.js"></script>
  <script src="./util/common.js"></script>
  <script src="./util/regularHelper.js"></script>
  <script src="./index.js"></script>
  
  <script src="//localhost:7106/entry.js" entry></script>
</body>

purehtml-q/index.js

'use strict';

$(function() {
    // const { warn: log } = console;
    const renderId = 'ztreeDemo';
    const operationSetting = {
        check: {
            enable: true
        },
        view: { showIcon: true },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pid",
                rootPId: 0
            }
        }
    };
    const treeNodes = [
        { id:1, pid:0, name:"随意勾选 1", open:true},
        { id:11, pid:1, name:"随意勾选 1-1", open:true},
        { id:111, pid:11, name:"随意勾选 1-1-1"},
        { id:112, pid:11, name:"随意勾选 1-1-2"},
        { id:12, pid:1, name:"随意勾选 1-2", open:true},
        { id:121, pid:12, name:"随意勾选 1-2-1"},
        { id:122, pid:12, name:"随意勾选 1-2-2"},
        { id:2, pid:0, name:"随意勾选 2", checked:true, open:true},
        { id:21, pid:2, name:"随意勾选 2-1"},
        { id:22, pid:2, name:"随意勾选 2-2", open:true},
        { id:221, pid:22, name:"随意勾选 2-2-1", checked:true},
        { id:222, pid:22, name:"随意勾选 2-2-2"},
        { id:23, pid:2, name:"随意勾选 2-3"}
    ];
    $.fn.zTree.init($(`#${renderId}`), operationSetting, treeNodes);
});

vue/src/views/About.vue

<template>
  <div class="about">
    <h1>This is about page</h1>
    <giant-tree :nodes="nodes" :setting ='setting'/>
  </div>
</template>
<script>
	import GiantTree from "@/components/GiantTree";

	export default {
		name: 'about',
		components: {
      GiantTree
    },
    data() {
      return {
        nodes: [
              { id:1, pid:0, name:"随意勾选 1", open:true},
              { id:11, pid:1, name:"随意勾选 1-1", open:true},
              { id:111, pid:11, name:"随意勾选 1-1-1"},
              { id:112, pid:11, name:"随意勾选 1-1-2"},
              { id:12, pid:1, name:"随意勾选 1-2", open:true},
              { id:121, pid:12, name:"随意勾选 1-2-1"},
              { id:122, pid:12, name:"随意勾选 1-2-2"},
              { id:2, pid:0, name:"随意勾选 2", checked:true, open:true},
              { id:21, pid:2, name:"随意勾选 2-1"},
              { id:22, pid:2, name:"随意勾选 2-2", open:true},
              { id:221, pid:22, name:"随意勾选 2-2-1", checked:true},
              { id:222, pid:22, name:"随意勾选 2-2-2"},
              { id:23, pid:2, name:"随意勾选 2-3"}
          ],
        setting: {
          check: {
              enable: true
          },
          view: { showIcon: true },
          data: {
              simpleData: {
                  enable: true,
                  idKey: "id",
                  pIdKey: "pid",
                  rootPId: 0
              }
          }
        }
      }
    }
  }
</script>
<style scoped>
  .about {
    color: #7265e6;
  }
</style>

vue/src/components/GiantTree.vue

<template>
  <div>
    <tree :nodes="nodes" :setting="setting"/>
  </div>
</template>

<script>
	import tree from "vue-giant-tree";

	export default {
		name: 'GiantTree',
		props: {
			setting: Object,
			nodes: Array,
		},
		components: {
      tree
    }
  }
</script>

希望效果

切换回q-purehtml，页面ztree正常渲染。

The text was updated successfully, but these errors were encountered:

howel52 · 2020-04-07T10:19:09Z

可参照这里

kuitos assigned howel52 Apr 3, 2020

howel52 mentioned this issue Apr 7, 2020

📝 complete purehtml demo #402

Merged

4 tasks

kuitos closed this as completed in #402 Apr 7, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]子项目为jquery项目，domready之后，内部动态渲染了ztree，可是在切换一次子项目路由之后，jquery项目中的ztree没有重新加载了。 #393

[Bug]子项目为jquery项目，domready之后，内部动态渲染了ztree，可是在切换一次子项目路由之后，jquery项目中的ztree没有重新加载了。 #393

mowatermelon commented Apr 3, 2020 •

edited

Loading

howel52 commented Apr 7, 2020

[Bug]子项目为jquery项目，domready之后，内部动态渲染了ztree，可是在切换一次子项目路由之后，jquery项目中的ztree没有重新加载了。 #393

[Bug]子项目为jquery项目，domready之后，内部动态渲染了ztree，可是在切换一次子项目路由之后，jquery项目中的ztree没有重新加载了。 #393

Comments

mowatermelon commented Apr 3, 2020 • edited Loading

What happens?

最小可复现仓库

复现步骤，错误日志以及相关配置

相关环境信息

现有效果

希望效果

howel52 commented Apr 7, 2020

mowatermelon commented Apr 3, 2020 •

edited

Loading