Z-tree插件使用方法

最新推荐文章于 2021-07-29 17:19:53 发布

想做大熊猫饲养员

最新推荐文章于 2021-07-29 17:19:53 发布

阅读量414

点赞数

本文链接：https://blog.csdn.net/qq_38397397/article/details/80576194

版权

在官网中下载的Z-tree有api、css、demo、js等文件，直接无视，按以下步骤引入相关文件。

1.将 zTree 的 css 目录复制到项目目录内

2.将 jquery.ztree.core.js 和 jquery-1.4.4.min.js 复制到项目目录内

3.在项目目录内创建 ztree.html 文件

4.引入 css 文件

代码实例：

<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO </TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script src="jquery-1.4.4.min.js"></script>
    <script src="jquery.ztree.core.js"></script>
    <SCRIPT LANGUAGE="JavaScript">
        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>