Use the Ztree plugin to generate trees on the front end

Simple steps to generate tree on frontend using Ztree plugin

1. Download zTee, import jquery.js into the page, and add js and css corresponding to zTree according to functional requirements (download address: https://github.com/zTree/zTree_v3 )

<script type="text/javascript" src="js /jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
<script type=" text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit-3.5.js">< /script>
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">

2. <div id="EvaluationDemo" class="ztree"></div>

3.

Configure zTree var setting = {
        callback: {
            onClick: zTreeOnClick //click event
        },
        view: {
            showLine: false,
            fontCss: getFontCss //Personalized text style, only for the <A> object displayed on the node of zTree.
        },
        data: {
            key: {
                name: "_name"
            },
            simpleData: {
                enable: true,
                pIdKey: "_parent_keyid",
                idKey: "_keyid"//Key of the node ID in the json string
            }
        },
        async: {
            enable: true //Set zTree whether to enable asynchronous loading mode Default value: false
        },
        dblClickExpand: true //When double-clicking a node, whether to automatically expand the parent node's logo Default value: true
    };

var TotalTreeNode={ }; //json data

4. where the initialization tree is to be displayed

var  zTreeObj = $.fn.zTree.init($("#EvaluationDemo"), setting, TotalTreeNode);