我已经回顾了fancytree的文档和示例,花了好几个小时来吸收所有fancytree的善意,就像海绵一样,但我似乎无法想象如何使用API调用首先使用文件夹对我的fancytree对象进行排序.我最初通过安排我的初始JSON数据解决了这个问题,因此它已经按照顶部的文件夹排序(项目的要求),但现在我需要在树中添加一个新文件夹,我需要重新排序确保新添加的文件夹与其他文件夹一起显示在树顶部的对象.
我注意到sortChildren()有一个奇怪的选项,它允许定义一个自定义比较函数,但是我无法理解如何使用它.
任何想法将不胜感激!
下面是我正在做的事情的片段(我用一些表单元素的数据填充新的孩子):
//add the new foldername to the tree and re-order
var rootNode = jQuery("#document_objects").fancytree("getRootNode");
var childNode = rootNode.addChildren({
title: jQuery('#newfoldername').val(),
tooltip: jQuery('#description').val(),
folder: true
});
rootNode.sortChildren(null, true);
Run Code Online (Sandbox Code Playgroud)
提前致谢!
我刚刚开始使用fancytree 2.6.0,我从Web服务请求填充它.
我的问题是所有节点都存在但是被ui-helper-hidden类隐藏了.我已经使用以下命令进行临时修复:$(rootNode.ul).removeClass('ui-helper-hidden'); 但我相信我错过了一些东西.
脚本和css:
<link href="Scripts/jquery-plugins/fancytree-2.6.0/src/skin-themeroller/ui.fancytree.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.11.1/jquery-1.11.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.11.1/jquery-migrate-1.2.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.11.2/jquery-ui.js" type="text/javascript"></script>
<script src="Scripts/jquery-plugins/fancytree-2.6.0/src/jquery.fancytree.js" type="text/javascript"> </script>
<script src="Scripts/jquery-plugins/fancytree-2.6.0/src/jquery.fancytree.themeroller.js" type="text/javascript"> </script>
Run Code Online (Sandbox Code Playgroud)
代码:
$('#selectedClausesDiv').fancytree();
$.when(
$.getJSON("Handlers/GetQuotationHandler.ashx?jsoncallback=?", { quoteReference: quoteReference, quoteVersion: quoteVersion })
).then(function (data) {
if (data.ErrorCode == 0 && data.Quotation != null) {
var rootNode = $("#selectedClausesDiv").fancytree("getRootNode");
$.each(data.Quotation.Covers, function (index, item) {
addCover(rootNode, item);
});
// FIXME: why is this necessary ??
// $(rootNode.ul).removeClass('ui-helper-hidden');
}
});
function addCover(rootNode, cover) {
var coverId = 'selected_' …
Run Code Online (Sandbox Code Playgroud) 花式树
我们要基于添加的自定义类禁用复选框。
例如:
renderNode: function(event, data) {
if(!data.node.folder) {
$(data.node.span).addClass("custom-class");
}
$(".custom-class").css({ // css to disable checkbox});
}
Run Code Online (Sandbox Code Playgroud) 如果我单击 fancytree 菜单节点,它们会激活菜单旁边出现的对话框。它们具有使对话框关闭的取消按钮。但是,当我再次单击相同的菜单项(节点)时,相同的对话框不会再次出现(正如我想要的那样),我认为因为 Fancytree 认为它是当前选定的节点,所以忽略它。
如果我单击另一个菜单项,它会正常工作并且会出现该菜单项的对话框。那么,如何让 Fancytreeactivate:
在再次单击当前选定的菜单项时触发相同的功能呢?
在我的取消按钮处理程序中,我尝试使用node.setSelected(false)
它来取消选择该项目,但当我再次单击同一项目时,该对话框仍然不会重新出现。我已经确认它是使用 setSelected(false) 的正确(当前)节点。
我只是使用标准 fancytree 配置,例如以下内容:
var currentMenuItemNode;
$("#tree").fancytree({
activate: function(event, data){
this.currentMenuItemNode = data.node;
}
});
cancelButtonHandler() {
// Close dialog box here
this.currentMenuItemNode.setSelected(false); // Deselect item
}
Run Code Online (Sandbox Code Playgroud)
任何想法欢迎!
我第一次使用FancyTree,我想定义一些自定义节点数据,特别是用于创建树的HTML数据中名为"content"的属性:
<li id="xxxx" data-content="true" class="folder">
Run Code Online (Sandbox Code Playgroud)
我有一个用JavaScript编写的init事件处理程序,我想在那里访问我的自定义数据属性:
init: function(event, data, flag)
{
var tree = $("#tree").fancytree("getTree");
node = tree.getNodeByKey(key);
var data = node.data;
Run Code Online (Sandbox Code Playgroud)
在一个在线教程中,我看到我的自定义属性可以作为node.data.content访问,但是我无法在警告框中显示我的自定义属性以证明它实际已定义.如何在JavaScript函数中访问自定义数据属性?
谢尔顿
我正在使用fancytree来显示简单的树视图.树中有两个"节点类型":组(可以有子节点)和项目(不能有子节点).我正在尝试使用contextMenu扩展来添加功能.我的菜单上有三个选项:添加,编辑和删除.是否可以仅为"组"节点显示"添加"菜单选项(它们的key
值以"g"开头)而不是"项目"节点?或者至少要为'Item'节点禁用它?
var treeData = [{title: "All Locations", key: "g0", folder: true, expanded: true, children: [
{title: "Location 1", key: "g1", folder: true, children: [
{title: "Item 1", key: "81"},
{title: "Item 2", key: "82"},
{title: "Item 3", key: "83"},
]},
{title: "Location 2", key: "g2", folder: true, children: [
{title: "Item 4", key: "87"},
]},
{title: "Location 3", key: "g3", folder: true, expanded: true, children: [
{title: "Item 5", key: "88"},
{title: "Item 6", key: "89"},
]}
]} …
Run Code Online (Sandbox Code Playgroud) 我有一个懒惰的加载树,一切正常,但我需要能够在jQuery中扩展一个特定的节点.我看过这里的演示,但每当我尝试调用时,toggleExpand()
我都会收到以下错误(在IE9上,这是我们内部网上的目标平台):
"0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'toggleExpand'"
Run Code Online (Sandbox Code Playgroud)
我的代码很简单:
var node = $("#OrgDataTree").fancytree("getTree").getNodeByKey(key);
node.toggleExpand();
alert(node.key); // testing for node, I see what I expect.
Run Code Online (Sandbox Code Playgroud)
使用node.expand()
给出相同的结果.我也尝试从activate(event, data)
事件中抓取节点,data.node
但它也不适合我(不是我需要使用的情况,我只是想找到一些获取节点对象句柄的方法)这样可行).
根据我发现的任何文档,似乎这应该做我需要的,但事实并非如此.
我正在尝试从symfony中的嵌套树结构生成JSON文件。它用于jquery-fancytree。因此,我正在研究sql查询。
但是我的RolesRepository给出了
错误:预期原则\ ORM \ Query \ Lexer :: T_IDENTIFIER,得到了“ *”
SQL查询手动工作
class RolesRepository extends \Doctrine\ORM\EntityRepository
{
public function getNestedToJSON()
{
$em = $this->getEntityManager();
$query = $em->createQuery(
'SELECT n.* , round((n.Rght-n.Lft-1)/2,0) AS offspring,
count(*)-1 + (n.Lft>1) AS level,
((min(p.Rght)-n.Rght-( n.Lft >1 ))/2) > 0 AS lower,
(((n.Lft-max(p.Lft)>1))) AS upper
FROM md_roles n, md_roles p
WHERE n.Lft BETWEEN p.Lft AND p.Rght
AND (p.id != n.id OR n.Lft = 1)
GROUP BY n.id
ORDER BY n.Lft')
->getResult();
return $query;
}
}
Run Code Online (Sandbox Code Playgroud)
实体: …