zTree入门

最新推荐文章于 2021-02-11 23:15:45 发布

blog-lichuyan

最新推荐文章于 2021-02-11 23:15:45 发布

阅读量186

点赞数

分类专栏：业务

本文链接：https://blog.csdn.net/qq_38643776/article/details/80488881

版权

业务专栏收录该内容

5 篇文章 0 订阅

订阅专栏

官网下载http://www.treejs.cn/v3/demo.php#_101点击右上角下载zTree_v3
克隆到本地

在根目录建立test html文件在html页面中引入这四个文件，注意路径，把下面代码复制吧

<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO </TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css/metroStyle/metroStyle.css"type="text/css">
    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css"type="text/css">
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.core.js"></script>
    <SCRIPT LANGUAGE="JavaScript">a
        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {};// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = [
            {name:"test1", open:true, children:[
                {name:"test1_1"}, {name:"test1_2"}]},
            {name:"test2", open:true, children:[
                {name:"test2_1"}, {name:"test2_2"}]}
        ];
        $(document).ready(function(){
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
    </SCRIPT>
</HEAD>
<BODY>
<div>
    <ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>