ztree使用方法 python后台

Posted 2020-10-03

一、在提前加载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