如何在ionic3中使用zTree，在ionic3中实现树结构

zTree官网链接：http://www.treejs.cn/v3/main.php#_zTreeInfo

第一步：

首先需要安装jquery；

安装步骤参考链接：https://www.cnblogs.com/wei-dong/p/10040404.html

安装的具体步骤：

npm install jquery

npm install @types/jquery

第二步：

在项目中手动加入zTree

zTree安装包参考链接：https://ztreeapi.iteye.com/ 

我把这个放在了assets文件夹里面

同时把jquery中的jquery.min.js文件放在了zTree中的js中

第三步   

使用方法：

1.首先在全局的index.html中的head中加入以下调用的script，你可以改成自己存放zTree的路径

<!-- ztree树引入 -->
    <script src="assets/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css"></script>
    <script src="assets/zTree/css/demo.css" type="text/css"></script>
    <script src="assets/zTree/js/jquery.min.js"></script>
    <script src="assets/zTree/js/jquery.ztree.core.js"></script>
    <script src="assets/zTree/js/jquery.ztree.excheck.js"></script>
    <script src="assets/zTree/js/jquery.ztree.exedit.js"></script>

2.在自己的HTML中使用

<!-- 点击选择树 -->
<button ion-button (click)="getTree()">树</button>
<div style="width:100%;height:100%;">
    <ul id="myzTree"  class="ztree"></ul>
</div>

3.在自己的ts中使用

datas是自己的数据，可以查看官网最简单的树，简单的json数据

    //设置区域网格树
    public setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: 'regionId',
                pIdKey: 'parentId',
            },
            key: {
                name: 'regionName'
            }
        },
        view: {
            showIcon: false,
            showLine: false,     
        },
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: { "Y": "p", "N": "s" }
        },
        callback: {
            onClick: (e, treeId, treeNode) => {
                console.log(treeNode['regionId']);
            }
        }
    };

    //树初始化
    public initTree(c: any, d: any[]) {
        $(c).empty();//清空树区域
        $.fn.zTree.init($(c), this.setting, d);
    }

    //获取区域网格树
    public getTree() {
        this.initTree('#myzTree', this.datas);
    }

之后就可以得到自己的树了

备注：使用zTree自带的样式的时候，如果结果展示不出来，记得把zTree/css/zTreeStyle/zTreeStyle.css复制到自己的scss中，并且修改其中图标的地址。

结果展示：点击按钮树显示以下树结果