插件:zTree

Posted 21270

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了插件: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>

 

 

..

以上是关于插件:zTree的主要内容,如果未能解决你的问题,请参考以下文章

jQuery的zTree插件(待补充)

JavaScript之jQuery-8 jQuery 使用插件(zTree树插件jQuery UI插件)

从零认识ztree树插件

zTree —— JQuery Tree 插件 | 软件推介

JQuery树形插件zTree+iFrame实现个性网址簿工具

jQuery插件--zTree中点击节点实现页面跳转时弹出两个页面的问题