插件: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使用所遇问题
问题1.$.fn.zTree为空或为Undefined 我在MVC中引用Jquery插件Ztree的JS并不存任何问题,而当我将Ztree的js引入项目中,就出现$.fn.zTree为空或为Undef ...
- js插件ztree使用
最新给公司后台写了一个配置页面,在网上搜到一个js插件ztree,记录一下使用心得. 首先说一下ztree官网,好多方法我都是从官网api上学习的,官网地址http://www.treejs.cn/v ...
- 插件使用一树形插件---zTree
zTree是一款挺好用的树形插件,中文文档齐全,demo丰富. 官方网站是 http://www.treejs.cn/v3/main.php#_zTreeInfo 源码网站 https://githu ...
- JQuery树插件——ztree
API与Demo:http://www.treejs.cn/v3/api.php 使用插件,第一步依然是引入: <link rel="stylesheet" href=&qu ...
- 项目中jquery插件ztree使用记录
最近公司要求做一个关于后台的管理系统.在这个mvvm模式横行的年代,虽然这里用jquery做项目可能有点不符合时代的潮流,但是管他呢,能做出来先在说呗(公司以后要改用angular或者vue来统一前端 ...
- jQuery插件--zTree中点击节点实现页面跳转时弹出两个页面的问题
这是第一次使用zTree,所以在使用之前我要先写一个demo来学习一下.我们要注意的是,zTree是一个jQuery插件,所以我们在导入zTree的js文件之前要先导入jQuery的js文件. 我们先 ...
- 树 插件 ztree 的基本用法
因业务需要 用到 ztree 插件 第一次用tree插件上手有点难度 官网 http://www.treejs.cn/v3/main.php#_zTreeInfo 第一步:初始化树,树的所有数据从后台 ...
- 一个神奇的jq插件----zTree
最近在公司做项目中用到了一个树(ztree)的插件,使用起来非常顺手,便写下这篇博客,用来记录一下,以便后续使用 首先先放上ztree官方的地址:http://www.treejs.cn/v3/mai ...
- ASP.NET中使用开源插件zTree的小结
在最近的项目应用中,找到了zTree免费的好东西,这里总结一下: 源码下载:http://www.ztree.me/ 效果是酱紫的: 前台代码: 样式和脚本 <link rel="st ...
- 无限树Jquery插件zTree的使用方法
其实Ztree官网已经有详细的API文档,一切以官网上的说明为准,我在此只是结合实践总结几条常用的ztree的功能特性. (ztree的语法结构是基于key-value的形式配置) 1:支持异步加载数 ...
随机推荐
- laravel5.5 excel的安装和使用
在项目开发中 最常用的就是把数据导出成excel的文件报表了 然而新下的项目中啥也没有;没有excel的扩展 会报这个错误 然后你需要通过composer安装这个依赖 学习源头:https://www ...
- git 查看提交的信息diff
git log --stat git show <hashcode> <filename> git log --pretty=oneline <filename> ...
- uoj#119. 【UR #8】决战圆锥曲线
http://uoj.ac/problem/119 可以认为数据基本随机,于是可以直接用线段树维护,对每个询问在线段树上进行剪枝搜索. #include<bits/stdc++.h> ty ...
- ObjectId与DateTime的互相转换
s会用mongdb中经常会需要用到通过“_id”去检查数据,筛选数据,但是想根据具体时间的id每次都需要做一下转换,这样搜索起来就很简单了. ObjectId转DateTime /// <sum ...
- vc++使用cookie登录网站
以http://www.idc816.com为例 效果图: 1)先登录获取cookie,再使用cookie获取用户信息 2)记录cookie,关闭程序后重新运行程序,直接获取用户信息 使用Fiddle ...
- javac命令和java命令
要知道java是分两部分的:一个是编译,一个是运行. javac:负责的是编译的部分,当执行javac时,会启动java的编译器程序.对指定扩展名的.java文件进行编译. 生成了jvm可以识别的字节 ...
- Dubbo(5)优化:接口抽取以及依赖版本统一
优化点: 1.在上面provider和consumer程序中都存在DemoProviderService接口了,两个项目中存在同样的东西,代码多余以及不方便管理: 正式的项目中存在很多的接口的,将统一 ...
- JavaScript之图片操作7
前面总结了很多了有关于图片操作的案例,本次是基于前面的基础,做一个综合的图片轮播效果,需要实现以下功能: 没有任何操作时,图片自动轮播 鼠标悬浮时,图片停止轮播:当鼠标移开,轮播继续 鼠标悬浮时,出现 ...
- itertools库 combinations() 和 permutations() 组合 和 排列选项的方法
combinations方法重点在组合,permutations方法重在排列. combinations和permutations返回的是对象地址,原因是在python3里面,返回值已经不再是list ...
- 数据库SQL语言学习--上机练习2(连接查询 嵌套查询)
上机练习2 1. 启动SQL Server 2008中的 SQL Server Management Studio. 2. 针对下面三张基本表进行操 ...