插件: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>

..

时间: 2024-11-09 00:34:35

插件:zTree的相关文章

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

一.jQuery zTree树控件 zTree介绍 - zTree 是利用jQuery的核心代码,实现一套能完成常用功能的Tree插件 - 兼容IE.FireFox.Chrome 等主流浏览器 - 支持 JSON 数据 - 支持一次性静态生成和Ajax异步加载两种方式 - 支持tree的节点移动.编辑.删除 zTree使用步骤 - step 1: 下载zTree相关文件(js.css) - 下载地址: http://www.ztree.me/ - step 2: 引入相关文件 - css: 样式

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

这是第一次使用zTree,所以在使用之前我要先写一个demo来学习一下.我们要注意的是,zTree是一个jQuery插件,所以我们在导入zTree的js文件之前要先导入jQuery的js文件. 我们先下载zTree,点击我跳转到一个网站进行下载 代码直接贴出来 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link

项目中jquery插件ztree使用记录

最近公司要求做一个关于后台的管理系统.在这个mvvm模式横行的年代,虽然这里用jquery做项目可能有点不符合时代的潮流,但是管他呢,能做出来先在说呗(公司以后要改用angular或者vue来统一前端的制作方式),个人觉得jquery还挺好用的.废话这里就不多叙述了.下面就先来一张完成后的图片展示一下ztree可以完成的功能. 额····这边弹出层的阴影是录制软件的问题(这边的前端插件用的是layui,想用的小伙伴可以自行百度layui,顺便一提,我这里用的版本是layui 1.0的,现在lay

ASP.NET中使用开源插件zTree的小结

在最近的项目应用中,找到了zTree免费的好东西,这里总结一下: 源码下载:http://www.ztree.me/ 效果是酱紫的: 前台代码: 样式和脚本 <link rel="stylesheet" href="JavaScript/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css" /> <script type="text/javascript"

一个功能丰富的 jQuery 树形插件 z-tree

链接 如果你的树 很复杂, 需要拖拽功能, 还可以考虑用这个 另外还有一个目前在用 Dynatree 如果一般的树, 还是自己写一个, 也很轻松,    如果有一两个复杂的点, 可以参考ZTree

无限树Jquery插件zTree的使用方法

其实Ztree官网已经有详细的API文档,一切以官网上的说明为准,我在此只是结合实践总结几条常用的ztree的功能特性. (ztree的语法结构是基于key-value的形式配置) 1:支持异步加载数据 语法配置: async: { enable: true, url:'abc.ashx', otherParam: { "request": "requestname" } } 简要说明: enable :设置 zTree 是否开启异步加载模式.  url:Ajax

树形插件ztree

1.为什么选择它? ---不需要递归,即可形成树 ---支持大数据的处理 2.上手 官方文档 zTree_v3\demo\cn\core\standardData.html文件中的数据需要递归实现,果断Pass. 同级目录下的SimpleData.html文件提供简单的数据提供方式,果断采用. <script type="text/javascript" src="../js/jquery.js"></script> <script t

JQuery Tree插件——zTree

Demo:点击下载 zTree 在线操作演示:http://www.ztree.me/v3/demo.php#_101 原文地址:https://www.cnblogs.com/shuilangyizu/p/8630063.html

jQuery及HTML5 插件的使用计划列单

1.基于CSS3和HTML5的 图片上传插件的使用及感受 Hupload   2015/12/5  类似链接http://www.htmleaf.com/Demo/201505091802.html 2.JQuery 图片的裁剪插件 copper.js  2015/12/6           加入添加编辑(网络)图片功能,主要需解决服务器跨域问题 3.jQUery树插件 zTree  2016  http://www.ztree.me/v3/main.php#_zTreeInfo 4.kind

树结构ztree的 ajax交互的简单使用

今天做前端页面要用到树结构,用了第三方插件ztree,搞了好久不过终于弄出来了,, 一点小心得.(用的版本 V3 ) 首先看下载的文件结构: 一:将要用到的CSS 和 JS 拷贝到工程中,我这里在工程中建一个文件夹ztreeStyle专门放ztree插件所需要的文件,里面可能有些文件用不上吧,但是我也不去深究了 刚接触  以后有时间在慢慢细化吧! 二:下面是action代码了,,非常之简单一目了然. //此方法是当第一次进页面的时候为父节点赋值, 为了测试里面写的都是些死数据, @Request