一、在提前加載js的地方寫一段js，判斷該頁面是否需要添加ztree，我的項目所有提前加載的js都寫在admin.js中
//增加ztree
$(document).ready(function() {
    var t = $(‘#tree-style‘).text();
    if(t.length>0){
            $(‘#col‘).addClass(‘sevice-table-container‘);
    }
});
二、修改要顯示ztree的html頁面
{% extends ‘layouts/admin_table_view.html‘ %}
////  在admin_table_view.html中添加{% block tree %}，在當前頁面的{% block tree %}中加一個div，class要指明為ztree，他的樣式來自於
zTreeStyle.css///
{% block tree %}
    
 
<div id="tree-style" class="ztree-style">
        <ul id="Servicetree" class="ztree"></ul>
    </div>
{% endblock %}
/////
{% block table_title %}
<h2>服務列表 <a type="button" href="{{url_for(‘admin.new_service_view‘)}}"class="btn btn-default btn-sm">
  <span class
 
="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增服務
</a></h2>
{% endblock%}

{% block table_header%}
    <th>服務名稱</th>
    <th>服務管理員</th>
    <th>服務等級</th>
    <th>父級服務</th>
    <th>上線時間</th>
    <th>下線時間</
 
th>
    <th>操作</th>
{% endblock%}

{% block table_scripts %}
<script>
var table_obj = {
    "ajax":"{{url_for(‘api.get_services‘)}}",
    "columns":[
        {"data":"service_name"},
        {"data":"manager"},
        {"data":"service_level"},
        {"data":"parent_service_id"},
        {"data":null},
        {"data":null},
        {"data":null}
    ],
    "columnDefs":[
        {
        "targets": -3,
        "data": null,
        "render": function ( data, type, full, meta ) {
            var d = new Date(data.online_date)
            return moment.utc(d).format(‘YYYY-MM-DD‘);
        }
    },
        {
        "targets": -2,
        "data": null,
        "render": function ( data, type, full, meta ) {
            var d = data.offline_date
            if (d == null)
            {return ‘‘}
            else
            {   d = new Date(d)
                return moment.utc(d).format(‘YYYY-MM-DD‘);}
        }
    },
        {
        "targets": -1,
        "data": null,
        "render":  function ( data, type, full, meta ) {
            return ‘<a id="aburl" href="‘+data.view_url+‘" class="btn btn-sm btn-info item-detail" data-id=‘
                    +data.id
                    +‘>修改</a> <button class="btn btn-sm btn-danger item-remove" data-id=‘
                    +data.id
                    +‘>刪除</button>‘;
        }
    }]
};
</script>
{% endblock%}

///在admin_table_view.html中添加{% block tree_scripts %}，在當前頁面的{% block tree_scripts %}中加一個js scripts，
另外，ztree使用的自帶核心js是jquery.ztree.core.js，同時它依賴官方jquery>1.5版本，使用時先引入jquery
{% block tree_scripts %}
     <script>
       var zTreeObj;
       // zTree 的參數配置，深入使用請參考 API 文檔（setting 配置詳解）
       var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",  //節點id
                    pIdKey: "pId",//父id
                    rootPId: 0 //根id，一般為0即可
                }
            },
           async: {
                enable: true,
                contentType: "application/json",
                url: "{{url_for(‘api.generate_tree‘)}}",  //獲取數據的接口
                autoParam: ["id", "name"],  //根據id，name來獲取數據
                type:"get"   //從接口獲取數據的方式
            }
       };

       $(document).ready(function(){
          zTreeObj = $.fn.zTree.init($("#Servicetree"), setting);
       });
      </script>
{% endblock %}


三、葉子節點的圖標樣式zTreeStyle.css

父節點打開.ztree li span.button.ico_open{margin-right:2px;  vertical-align:top; *vertical-align:middle;background:url(../images/img/open-folder-16.png) no-repeat scroll 0 0 transparent;}
父節點關閉.ztree li span.button.ico_close{margin-right:2px; vertical-align:top; *vertical-align:middle;background:url(../images/img/close-folder.png) no-repeat scroll 0 0 transparent;}
葉子節點.ztree li span.button.ico_docu{margin-right:2px; vertical-align:top; *vertical-align:middle;background:url(../images/img/layer_16px.png) no-repeat scroll 0 0 transparent;}

四、接口生成需要的數據，必須是json格式
@api.route(‘/services_tree/‘, methods=[‘GET‘])
@token_authorize
def generate_tree():
    #返回服務樹的函數
    services_tree = Services.query.all()
    zNodes = [d.tree_to_json() for d in services_tree]
    zNodes.append({"id": "-1", "pId": "0", "name": "服務", "open": "True"}) #添加根節點顯示的內容，根節點id設為-1，根節點沒有父id，顧令其父id為0
    return jsonify(zNodes)

五、model獲取每條相應數據
    def tree_to_json(self):
        """返回服務樹的相關數據"""
        service_post = {
            ‘id‘: self.id,
            ‘pId‘: self.parent_service_id or ‘-1‘,  #如果不存在父id，則令父id為-1
            ‘name‘: self.service_name,
            ‘url‘: url_for(‘admin.get_service_view‘, id=self.id, _external=True)  #註意這裏的字段名為ztree規定好的字段名
        }
        return service_post

ztree使用方法 python後臺