• 插件:zTree



    JQuery zTree core v3.5.23

    http://zTree.me/

    Date: 2016-04-01

    zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件

    兼容 IE、FireFox、Chrome 等浏览器

    在一个页面内可同时生成多个 Tree 实例

    支持 JSON 数据

    支持一次性静态生成 和 Ajax 异步加载 两种方式

    支持多种事件响应及反馈

    支持 Tree 的节点移动、编辑、删除

    支持任意更换皮肤 / 个性化图标(依靠css)

    支持极其灵活的 checkbox 或 radio 选择功能

    简单的参数配置实现 灵活多变的功能


    http://www.bootcdn.cn/zTree.v3/

    http://www.ztree.me/v3/api.php  API  (API的说明太简陋)

    http://www.ztree.me/v3/demo.php  DEMO  (主要还是要看DEMO里面的源码。)

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <link href="http://cdn.bootcss.com/zTree.v3/3.5.23/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/zTree.v3/3.5.23/js/jquery.ztree.all.js"></script>
    <script type="text/javascript">
    var setting = {
        //显示复选框
        check: {
            enable: true
        },
        /*
        //显示单选框
        check: {
            enable: true,
            chkStyle: "radio",
            radioType: "level"
        },
        */
    };
    var zNodes =[
        { name:"父节点1 - 展开", open:true,
            children: [
                { name:"父节点11 - 折叠",
                    children: [
                        { name:"叶子节点111"},
                        { name:"叶子节点112"},
                        { name:"叶子节点113"},
                        { name:"叶子节点114"}
                    ]},
                { name:"父节点12 - 折叠",
                    children: [
                        { name:"叶子节点121"},
                        { name:"叶子节点122"},
                        { name:"叶子节点123"},
                        { name:"叶子节点124"}
                    ]},
                { name:"父节点13 - 没有子节点", isParent:true}
            ]},
        { name:"父节点2 - 折叠",
            children: [
                { name:"父节点21 - 展开展开展开展开", open:true, checked:true,
                    children: [
                        { name:"叶子节点211"},
                        { name:"叶子节点212"},
                        { name:"叶子节点213"},
                        { name:"叶子节点214"}
                    ]},
                { name:"父节点22 - 折叠",
                    children: [
                        { name:"叶子节点221"},
                        { name:"叶子节点222"},
                        { name:"叶子节点223"},
                        { name:"叶子节点224"}
                    ]},
                { name:"父节点23 - 折叠",
                    children: [
                        { name:"叶子节点231"},
                        { name:"叶子节点232"},
                        { name:"叶子节点233"},
                        { name:"叶子节点234"}
                    ]}
            ]},
        { name:"父节点3 - 没有子节点", isParent:true}
    ];
    
    $(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
    </script>
    <ul id="treeDemo" class="ztree"></ul>

    ..

  • 相关阅读:
    源代码的下载和翻译
    Git使用入门
    搭建Andriod开发环境
    Andriod系统移植与驱动开发概述
    直观打印二叉树
    深度优先遍历图(DFS)
    《UNIX网络编程 卷1 套接字联网API》(第三版)阅读笔记----2018.5.22
    C/C++
    实现具有getMin功能的栈
    用两个栈来模拟一个队列
  • 原文地址:https://www.cnblogs.com/qq21270/p/5518869.html
Copyright © 2020-2023  润新知