Fancytree实例
一、实例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fancyTreeTest</title>
<script src="jquery.js"></script>
<script src="jquery-ui.min.js"></script>
<link href="ui.fancytree.min.css" rel="stylesheet" />
<script src="jquery.fancytree-all.min.js"></script>
<script type="text/javascript">
$(function () {
//Create the tree inside the <div id="tree"> element.与zTree类似
// 基础配置，返回数据包括
$("#tree")
.fancytree({
source: [
{ "title": "Node 1", "key": "1" },
{
"title": "Folder 2",
"key": "2",
"folder": true,
"children": [
{ "title": "Node 2.1", "key": "3" },
{ "title": "Node 2.2", "key": "4" }
]
}
]
});
});
</script>
<script>
$.ui.fancytree.debugLevel = 1; // silence debug output
function logEvent(event, data, msg) {
// var args = $.isArray(args) ? args.join(", ") :
msg = msg ? ": " + msg : "";
$.ui.fancytree.info("Event('" + event.type + "', node=" + data.node + ")" + msg);
} $(function () {
$("#tree")
.fancytree({
checkbox: true,
// --- Tree events -------------------------------------------------
blurTree: function (event, data) {
logEvent(event, data);
},
create: function (event, data) {
logEvent(event, data);
},
init: function (event, data, flag) {
logEvent(event, data, "flag=" + flag);
},
focusTree: function (event, data) {
logEvent(event, data);
},
restore: function (event, data) {
logEvent(event, data);
},
// --- Node events -------------------------------------------------
activate: function (event, data) {
logEvent(event, data);
var node = data.node;
// acces node attributes
$("#echoActive").text(node.title);
if (!$.isEmptyObject(node.data)) {
// alert("custom node data: " + JSON.stringify(node.data));
}
},
beforeActivate: function (event, data) {
logEvent(event, data, "current state=" + data.node.isActive());
// return false to prevent default behavior (i.e. activation)
// return false;
},
beforeExpand: function (event, data) {
logEvent(event, data, "current state=" + data.node.isExpanded());
// return false to prevent default behavior (i.e. expanding or collapsing)
// return false;
},
beforeSelect: function (event, data) {
// console.log("select", event.originalEvent);
logEvent(event, data, "current state=" + data.node.isSelected());
// return false to prevent default behavior (i.e. selecting or deselecting)
// if( data.node.isFolder() ){
// return false;
// }
},
blur: function (event, data) {
logEvent(event, data);
$("#echoFocused").text("-");
},
click: function (event, data) {
logEvent(event, data, ", targetType=" + data.targetType);
// return false to prevent default behavior (i.e. activation, ...)
//return false;
},
collapse: function (event, data) {
logEvent(event, data);
},
createNode: function (event, data) {
// Optionally tweak data.node.span or bind handlers here
logEvent(event, data);
},
dblclick: function (event, data) {
logEvent(event, data);
// data.node.toggleSelect();
},
deactivate: function (event, data) {
logEvent(event, data);
$("#echoActive").text("-");
},
expand: function (event, data) {
logEvent(event, data);
},
focus: function (event, data) {
logEvent(event, data);
$("#echoFocused").text(data.node.title);
},
keydown: function (event, data) {
logEvent(event, data);
switch (event.which) {
case 32: // [space]
data.node.toggleSelected();
return false;
}
},
keypress: function (event, data) {
// currently unused
logEvent(event, data);
},
lazyLoad: function (event, data) {
logEvent(event, data);
// return children or any other node source
data.result = { url: "ajax-sub2.json" };
// data.result = [
// {title: "A Lazy node", lazy: true},
// {title: "Another node", selected: true}
// ];
},
loadChildren: function (event, data) {
logEvent(event, data);
},
loadError: function (event, data) {
logEvent(event, data);
},
postProcess: function (event, data) {
logEvent(event, data);
// either modify the ajax response directly
data.response[0].title += " - hello from postProcess";
// or setup and return a new response object
// data.result = [{title: "set by postProcess"}];
},
removeNode: function (event, data) {
// Optionally release resources
logEvent(event, data);
},
renderNode: function (event, data) {
// Optionally tweak data.node.span
// $(data.node.span).text(">>" + data.node.title);
logEvent(event, data);
},
renderTitle: function (event, data) {
// NOTE: may be removed!
// When defined, must return a HTML string for the node title
logEvent(event, data);
// return "new title";
},
select: function (event, data) {
logEvent(event, data, "current state=" + data.node.isSelected());
var s = data.tree.getSelectedNodes().join(", ");
$("#echoSelected").text(s);
}
})
.bind("fancytreeactivate",
function (event, data) {
// alternative way to bind to 'activate' event
logEvent(event, data);
})
.on("mouseenter mouseleave",
".fancytree-title",
function (event) {
// Add a hover handler to all node titles (using event delegation)
var node = $.ui.fancytree.getNode(event);
node.info(event.type);
});
$("#btnSelect")
.click(function (event) {
var node = $("#tree").fancytree("getActiveNode");
node.setSelected(!node.isSelected());
});
$("#btnRemove")
.click(function (event) {
var node = $("#tree").fancytree("getActiveNode");
node.remove();
});
});
</script>
</head>
<body>
[...]
<!-- show tree -->
<div id="tree">...</div>
[...]
</body>
</html>
总结：1）将body中的div换成table就会出现上边不同的结果，最右边结果
2）对数的具体操作：
//获取Id为tree的Fancytree对象
$("#tree").fancytree("getTree") //获取tree的根节点
$("#tree").fancytree("getRootNode") //访问每个节点并把节点展开
$("#tree").fancytree("getRootNode").visit(function(node) {
node.setExpanded(true);
3）参考大牛：http://wwwendt.de/tech/fancytree/demo/
官方文档下载：http://wwwendt.de/tech/fancytree/demo/
Fancytree实例的更多相关文章
- 最近学习工作流 推荐一个activiti 的教程文档
全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介 协议 下载 源码 必要的软件 ...
- js-静态、原型、实例属性
本篇来说一下js中的属性: 1.静态属性 2.原型属性 3.实例属性 静态属性: function klass(){} var obj=new klass(); klass.count=0; klas ...
- ZIP压缩算法详细分析及解压实例解释
最近自己实现了一个ZIP压缩数据的解压程序,觉得有必要把ZIP压缩格式进行一下详细总结,数据压缩是一门通信原理和计算机科学都会涉及到的学科,在通信原理中,一般称为信源编码,在计算机科学里,一般称为数据 ...
- EntityFramework Core 1.1是如何创建DbContext实例的呢？
前言 上一篇我们简单讲述了在EF Core1.1中如何进行迁移,本文我们来讲讲EF Core1.1中那些不为人知的事,细抠细节,从我做起. 显式创建DbContext实例 通过带OnConfiguri ...
- redis集成到Springmvc中及使用实例
redis是现在主流的缓存工具了,因为使用简单.高效且对服务器要求较小,用于大数据量下的缓存 spring也提供了对redis的支持: org.springframework.data.redis.c ...
- 流程开发Activiti 与SpringMVC整合实例
流程(Activiti) 流程是完成一系列有序动作的概述.每一个节点动作的结果将对后面的具体操作步骤产生影响.信息化系统中流程的功能完全等同于纸上办公的层级审批,尤其在oa系统中各类电子流提现较为明显 ...
- UWP开发之Template10实践：本地文件与照相机文件操作的MVVM实例(图文付原代码)
前面[UWP开发之Mvvmlight实践五:SuspensionManager中断挂起以及复原处理]章节已经提到过Template10,为了认识MvvmLight的区别特做了此实例. 原代码地址:ht ...
- echarts+php+mysql 绘图实例
最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...
- 【HanLP】HanLP中文自然语言处理工具实例演练
HanLP中文自然语言处理工具实例演练 作者:白宁超 2016年11月25日13:45:13 摘要:HanLP是hankcs个人完成一系列模型与算法组成的Java工具包,目标是普及自然语言处理在生产环 ...
随机推荐
- python使用笔记006-函数+json操作
一.函数 函数:提高代码的复用性 1.1 函数的定义 1 def hello(): 2 print('hello') 3 print('fdsfjslkfs') 4 5 #函数不调用就不会执行 6 h ...
- mysql 远程登录 10038提示，无法连接
mysql 默认使用端口3306 MYSQL服务器:WIN7 控制面板,WINDOWS防火墙--高级设置--入站规则--新建规则--端口--TCP-特定本地端口--3306--允许连接--下一步,至完 ...
- CSS从入门到喜欢，从喜欢到着魔
如果把网页比作一个人的话,html就是他的骨架,而css是他的皮肤,javascript是神经控制着行动.html,css,javascript都是构建网页的核心技术. CSS简介 css指的是层叠样 ...
- Requests方法 -- 参数化
import requests#禁用安全请求警告from requests.packages.urllib3.exceptions import InsecureRequestWarningreque ...
- Leetcode3.无重复字符的最长子串——简洁易懂
> 简洁易懂讲清原理,讲不清你来打我~ 输入字符串,找到无重复.最长.子串,输出长度 ੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...
- 使用宝塔配置laravel站点时，遇到open_basedir restriction in effect. 原因与解决方法
今天一位朋友在linux服务器部署thinkphp5的时候PHP报了这个错误,如下: Warning: require(): open_basedir restriction in effect. F ...
- 《手把手教你》系列技巧篇（十）-java+ selenium自动化测试-元素定位大法之By class name（详细教程）
1.简介 按宏哥计划,本文继续介绍WebDriver关于元素定位大法,这篇介绍By ClassName.看到ID,NAME这些方法的讲解,小伙伴们和童鞋们应该知道,要做好Web自动化测试,最好是需要了 ...
- hash表/哈希表
https://blog.csdn.net/duan19920101/article/details/51579136 简单理解就是一个通过映射直接查找的表(散列表),用哈希函数将数据按照其存储特点进 ...
- ESLint自用规则
官方文档地址 rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during devel ...