使用Ztree插件在前端生成树 Ztree

使用Ztree插件在前端生成树的简单步骤

1.下载zTee，页面引入jquery.js，根据功能需求添加zTree相应的js和css （下载地址：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. 配置zTree

var setting = {
        callback: {
            onClick: zTreeOnClick  //点击事件
        },
        view: {
            showLine: false,
            fontCss: getFontCss //个性化文字样式，只针对 zTree 在节点上显示的<A>对象。
        },
        data: {
            key: {
                name: "_name"
            },
            simpleData: {
                enable: true,
                pIdKey: "_parent_keyid",
                idKey: "_keyid"//json串中节点ID的KEY
            }
        },
        async: {
            enable: true  //设置 zTree 是否开启异步加载模式 默认值: false
        },
        dblClickExpand: true  //双击节点时，是否自动展开父节点的标识  默认值: true
    };

var TotalTreeNode={ }; //json数据

4.初始化树要显示的地方

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