zTree -- jQuery 樹插件

時間 2019-11-12

標籤 ztree jquery 插件欄目 JQuery 简体版

原文原文鏈接

zTree簡介：http://www.treejs.cn/v3/main.php#_zTreeInfojavascript

API文檔：http://www.treejs.cn/v3/api.phpphp

Demo演示：http://www.treejs.cn/v3/demo.php#_101css

zTree下載：https://gitee.com/zTree/zTree_v3html

附上一個入門的例子：java

zTree的一個效果圖：jquery

代碼以下：git

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/demo.css" type="text/css">
        <link rel="stylesheet" href="css/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>
            var zTreeObj;
            // zTree 的參數配置
            var setting = {
                   view: {
                       
               },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
               };
            // zTree 的數據屬性
            var zNodes =[
            {id: 1,   pId: 0,  name: "總部", open: true},
            
            {id: 100, pId: 1,  name:"北京分公司", open: true},
            {id: 101, pId:100, name:"東城區子公司"},
            {id: 102, pId:100, name:"海定區子公司"},
            
            {id: 200, pId: 1,  name:"上海分公司"},
            {id: 201, pId:200, name:"黃浦區子公司"},
            {id: 202, pId:200, name:"長寧區子公司"},
            
            {id: 300, pId: 1,  name:"廣州分公司"},
            {id: 301, pId:300, name:"天河區子公司"},
            {id: 302, pId:300, name:"海珠區子公司"},
            {id: 303, pId:300, name:"番禺區子公司"},
            {id: 304, pId:300, name:"增城區子公司"},
            
            {id: 400, pId: 1,  name:"深圳分公司"}
            ];
            $(document).ready(function(){
              zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            });
        </script>
    </head>
    <body>
        <div id="treeDemo" class="ztree"></div>
    </body>
</html>

相關標籤/搜索

jquery插件

ztree

插件

bootstrap+ztree+lodash+jquery

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。