首页 > 代码库 > zTree的3.5.26静态树与动态树——(八)

zTree的3.5.26静态树与动态树——(八)

1.静态树:

目录结构:(css与js为下载的原文件夹)

技术分享

 

代码

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>zTree测试</title>        <link rel="stylesheet" type="text/css" href="css/demo.css" />        <link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css" />        <script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>        <script src="js/jquery.ztree.all.js" type="text/javascript" charset="utf-8"></script>    </head>    <script type="text/javascript">        <!--        var setting = {            data: {                simpleData: {                    enable: true,                    idKey: "id",                    pIdKey: "pId",                    rootPId: 0                }            },            callback: {                onClick: zTreeOnClick            }        };        var treeNodes = [{                "id": 1,                "pId": 0,                "name": "test1"            },            {                "id": 11,                "pId": 1,                "name": "test11"            },            {                "id": 12,                "pId": 1,                "name": "test12"            },            {                "id": 111,                "pId": 11,                "name": "test111"            }        ];        //鼠标点击事件        function zTreeOnClick(event, treeId, treeNode) {            alert(treeNode.tId + ", " + treeNode.name);        };        $(document).ready(function() {            $.fn.zTree.init($("#treeDemo"), setting, treeNodes);        });    </script>    <body>        <div class="content_wrap">            <div class="zTreeDemoBackground left">                <ul id="treeDemo" class="ztree"></ul>            </div>        </div>    </body></html>

 测试:

技术分享

 

zTree的3.5.26静态树与动态树——(八)