mbraak / jqtree Goto Github PK

If you use the option 'saveState' in ie7, you get an error about localstorage.

Hello,

Thanks for this plugin!
Is there a way to collapse the tree or certain nodes of the tree?

Thanks in advance,
seba

Is it possible to drag / drop items from a separate list onto a jqTree node? Or it only support dragAndDrop within itself?

I have to perform some operations (display some buttons) when the user selects a node.
Is there any method to this?
I don't have found questions about this.

Is it possible to select the first level node which goes to that webpage, drops the menu down and shows the subtree?

I'm trying to wrap the title of a node in an A tag like this:

jQuery('#tree1').tree({
        data: data,
        saveState: true,
        selectable: true,
        onCreateLi: function(node, $li) {
        // Add 'icon' span before title
        $li.find('.title').before(''); //node.url is some dynamic url for this node
        $li.find('.title').after('');
    }
});'

But in the html output, the A tag comes entirely before the title:

»

Fastigheter

Hi

First of all, thanks for making an awesome plugin :)

Is it possible to make to make a node not draggable based on a certain data passed in the json data.

For example:

{
"label":"Home Page",
"id":"6",
"parent_page_id":"0",
"fixed":"1"
},
{
"label":"Another Page",
"id":"7",
"parent_page_id":"0",
"fixed":"0",
........

If fixed is 1 then make the node not movebable/draggable.

If this is not currently supported, in a future release you could allow css classes to be passed from the json and injected into the html along with .title?

Regards

Asa

Hello there.
I would like to know if it is possible to have checkboxes as childrens.
I could not find any info about it.

Thanks in advance.

Hallo,

I just downloaded v1.3.1. Specially for the removeNode function. It works fine except for one thing. If i make a new item under a child item, which makes this child a parent, and i remove the new created child the newly created parent keeps the triangle image of a folder.

Thanks,
Jonathan

If you try to move a node to inside another one which is closed, it will open but 'tree.open' won't be called.

This is a blocker issue if you're populating the nodes as they're opened using AJAX for retrieving the children nodes.

The 'tree.open' event should probably be triggered by FolderElement.open().

Could you please take a look at this issue?

hello,

as the function getNodeById(id), it is possible to do a function to search by a label ?

thanks.

Example:

$tree.bind('tree.init', function() {
  $tree.tree('getNodeByName', 'node1');
});

This returns null. If we call the same function at a later time, it returns the node correctly.

Based on issue #37 I have managed to implement a dynamicly loading tree.
Problem is, my client also requests the feature to save the state of the tree.

Since the whole tree isn't saved to the localstorage or cookie, I need some sort of functionality to refire my ajax requests after a node has been reloaded. Thus loading the childnodes. Those childnodes have to be iterated again to To check if subtrees have to be loaded.

I spotted the onGetStateFromStorage event on the tree object, is this the spot where I can hook up the above logic and return false to further block that event from executing?

I can drop a jsFiddle with some mocked up code if you require my dynamic loading logic.

Thanks in advance!

Regards

If you add a child to a node without children using the function 'appendNode', then the existing node does not get a toggler button.

Example:

'node_a' is a node without children

-> Add a child to node_a

$tree.appendNode('abc', node_a);

-> Now, 'node_a' should get a toggle button. Note that it does not.

I have a feature suggestion, that I think might be useful for other users as well.

I'd like to append one (or more) additional classes to the nodes in order to apply some further formatting on items with specific types. I thought that it should come from the data, eg. from the appendClass key. My blueprint would be:

var data = [
             {
                 label: 'Project X',
                 appendClass: 'project',
                 children: [
                     { label: 'Sprint 1', appendClass: 'sprint' },
                     { label: 'Sprint 2', appendClass: 'sprint' }
                 ]
             }

So that would result in

<li class="folder project">
  <div>
    <a class="toggler">»</a>
    <span class="title">Project X</span>
  </div>
  <ul style="display: block; ">
     <li class="sprint">
     <div>
      <span class="title">Sprint 1</span>
    </div>
    </li>
    <li class="sprint">
    <div>
      <span class="title">Sprint 2</span>
    </div>
    </li>
  </ul>
</li>

As far as I understood the code, there's nothing similar yet so I think it would be nice to have it implemented.

I couldn't find any current API that would allow me to do that.

For example, in my application it is possible to create new elements in the tree dynamically.

Currently I'm refreshing the whole tree if I need to add another root element, while this also looses all information about collapsed and expanded nodes.

It would be handy if I could just append some element to the current tree. Is that already possible?

jqTree have appendNode method, but no appendNodes method.

When append a bunch nodes, I must use a loop to add nodes, if appendNodes method exists, then it will be more convenient.

Besides, using appendNode to add a bunch nodes is very slow(I think the sub-tree refreshed in every appendNode operates), if using appendNodes, maybe will be more effective.

I want to use jqtree with rtl language, any support for it ?

I am attempting to insert the demo jqtree code into a div in a project using Twitter's Bootstrap.

It's not rendering, though; the exact reason I have been unable to determine, but it's clear that attempting to attach the data to the tree-div is terminating early and not actually attaching the data.

Has this problem been seen before? Is there any kind of workaround or anything?

JqTree uses css classes like tree, folder, folder and title. Let's prepend these with 'jqtree-'.

I'm using jqTree with Symfony2 (and some bad looking ajax requests) to construct a tree and store it as a nestedTree doctrine object.

When creating an object, if all goes well, I load the subnode with your new dev/loadData function, and if the parent node is open, the freshly-created-subnode appears magically under its parent.

I'm looking for a "nice" way to dynamically open a node (in my case, the parent node, to help the user understanding where he's adding nodes to the tree). Is there somehow a way to open a node object (node.open() ?) and its parents within hierarchy ?

I know that CoffeeScript will use strict comparison (===) instead of == and this will cause some issues when you use the id sometimes as a number and sometimes as a string.

For example, you could get a node with tree.tree('getNodeById', 100), but not with tree.tree('getNodeById', '100').

I don't know if it is possible to use weak comparison in CoffeeScript, but an alternative would be to always store as string and always convert to string in getNodeById...

Or just bypass CoffeeScript with something like

doSomething() if `'1' == 1`

What is your opinion on this subject?

EDIT: Forgot to mention, this is with the newest version of the dev branch.

I'm attempting to add expand/collapse all buttons to an app that uses jqTree. I've run into a problem with collapse. I've implemented the collapse all button by iterating through the tree and calling closeNode on each node (per the suggestion in this issue #19). However, this doesn't work; the expand arrows change but the tree does itself does not. Minimal test case follows:

To trigger the error:

1. click open
2. click close

<html> 
    <head>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="tree.jquery.js"></script>
        <link rel="stylesheet" href="jqtree.css">
    </head>
    <body>
        <div id="tree"></div>
        <button id = "open">Open</button>

        <button id = "close">Close</button>
        <script type="text/javascript">
            var data = [
            {
                label: 'node1',
                id: 1,
                children: [
                { label: 'child1', children:[{label:"newchild"}] },
                { label: 'child2' }
                ]
            }
            ];

            $tree = $('#tree');
            $tree.tree({
                data: data,
                autoOpen:false
            });

            $("#open").click(function() { 
                var tree = $tree.tree("getTree");
                tree.iterate(function(node, level) {                                                                    
                   if (node.hasChildren()) {                                                                           
                        $tree.tree("openNode", node, true);                                                            
                   }
                   return true;                                                                                        
                });
            });

            $("#close").click(function() { 
                var tree = $tree.tree("getTree");
                tree.iterate(function(node, level) {                                                                    
                   if (node.hasChildren()) {                                                                           
                        $tree.tree("closeNode", node, true);                                                            
                   }
                   return true;                                                                                        
                });
            });

        </script>
</body>
</html>

i tried to use the 'selectNode' method to open a folder in the tree.

the first time it opens fine and all child nodes open fine till it reached the selected node.

then i collapse all open nodes and try to use the 'selectNode' again to open all nodes again but then it fails.

the expand/collapse image works but nothing gets expanded anymore.

this happend since i downloaded the latest version 0.11.

<div id="tree1"></div>
<a id="openme">open</a>
<script>
var data = [
    {
        label: 'node1',
        children: [
            { label: 'child1' },
            { label: 'child2', id: 'surprise', children: [
                  {label: 'Can u see me?', id: 'seemee'}
            ] }
        ]
    },
    {
        label: 'node2',
        children: [
            { label: 'child3' }
        ]
    }
];
var $r = $('#tree1').tree({
    data: data,
    autoOpen: true,
    dragAndDrop: true,
    selectable: true
});

$('#openme').click(function(){
var node = $r.tree('getNodeById', 'seemee');
$r.tree('selectNode', node, true);

});
</script>

When I embed a treeview onto a move able, resize able dialog and then expand a node:

I can drag or move the dialog once more, but after that I cannot drag or resize any dialog after that point. Even if I instantiate a new dialog on a new div, the move and resize drag is squashed on all jquery dialog. jQuery UI 1.8.16

Steps to reproduce: prepare a div for a dialog with a div inside for a tree. Set the tree div to contain a tree, then set the dialog div to become a dialog. you can also set the tree div after the dialog is created, same result. Tried on Chrome and Ie9

When you got links inside ul list sometimes when you click them you move whole li element. Is there a way to specify handle element?

Example:

          <li><span class="handle">move me</span> <a href="http://google.com/">Google</a></li>
          <li><span class="handle">move me</span> <a href="http://jquery.com/">jQuery</a></li>
    </ul>```

```javascript
$('#tree1').tree({
    data: data,
    handle: '.handle'
});

Demo - http://demo.wil-linssen.com/jquery-sortable-ajax/

hello,
you can see in this picture my strange icons : http://hpics.li/272ac84
i can't fix it, can you help me ?
i'm using IE8.
thank you

I've attempted to do the tutorial + the tree.click event binding and it does not trigger the alert. I'm using Firefox 14.0.1 in Ubuntu 12.04.

Steps to reproduce the problem:

1. Go to demo

2. move child2 before node2

3. try to move node2 inside child2 (bug)

4. but when you place child2 after node2 you can now move node2 inside child2

It is a common operation to append nodes to another node or as more node roots.

Currently, loadData() already do that except that you can't append root nodes since it would reload all tree when parentNode is not passed.

The only current way to do that is by the use of addAfter() and some additional manual steps.

if i parse a empty children array the tree renders as if it is a file node!.

i looked into the code an i found out that the code checks: if child count = 0 = CreateFileLi

but it should be CreateFolderLi, this way the folder icons are displayed. (parsing empty children array means its still a folder)

/** Some additional requests **/

Events:

1. onTreeComplete OR onTreeShow (so im able to fetch files according to the current selected node)
2. onTreeMouseOver

Methods:

1. getParents ( an array containing al the parent nodes till root )

I've just noticed that I can't move my nodes anymore in the dev branch. Can you replicate this?

At the first moment my tree contains only the root nodes and their children.
This children don't have children because they are loaded dynamically when the user clicks on the node (using loadData).

In this case, the layout doesn't show the arrows on the nodes that don't have children, but I need the arrows, for presentation issues.

To resolve this, I added an anchor with class="toggler closed", but this arrow doesn't have the open and close event.

How can I solve this case?

It should be possible to load nodes on demand from the server. This is useful for a very big tree.

Hi, I've implemented (quite easily) lightweight but flexible context menu builder based on A Simple Good Looking Context Menu by Joe Walnes,
https://github.com/joewalnes/jquery-simple-context-menu.
I'm beginner in JavaScript, nevertheless, the only problem was to get the mouse pointer coordinates within bind tree.contextmenu event. After series of unsuccessful attempts I finally added to the core script tree.jquery.js (from download package) 2 strings after string #1014:

event.page_x = e.pageX;
event.page_y = e.pageY;

and it works!

Is it possible to add these properties in future releases?

In some cases nodes are displayed on top of each other in ie7.

To reproduce:

• open example2
• close all nodes
• open nodes
  • Saurischia
  • Theropods
  • Coelurosaurians

-> The children of 'Coelurosaurians' are now displayed on top of 'Sauropodomorphs'

I got this error in the dev branch (0.11), but it probably also applies to earlier versions.

I'm having some trouble implementing the saveState option. I think it's because of the way I'm using this tree for navigation. I've included the cookie and have saveState = true. Each node is a link to a page for navigation. EX:

            label: '<a href="link-1.html">Menu 1.7.2</a>',
                children: [
                    {label: '<a href="">Sigma Phi Epsilon</a>'},
                    {
                        label: '<a href="link-2.html">Menu 2 1.7.2</a>',
                        children: [
                            {label: '<a href="link-3.html">Menu 3 1.7.2</a>'},

Where each link contains the same tree.

Is it possible to saveState using jqTree this way? Is there a parameter I can add on the end of each link?

Let's rewrite the whole thing in coffeescript.

I think this will improve the code and make it more readable. Of course, it must still be possible to use jqTree using javascript.

'Chosen' is an example of a library in coffeescript: https://github.com/harvesthq/chosen/

Hi, in the documentation you say that we can use event.preventDefault(); to prevent node move and ask user to confirm it first. Then we can call event.doMove(); to move it.

But event.doMove(); is not defined in that scope. Instead, we need to call event.move_info.do_move();, which is actually doMove() itself. You might want to update docs for this.

Otherwise, great tree component!

Dear Mbraak,

I'm having probleme when i want to move a node (tree.move) :
If i try to access (e.move_info.moved_node.parent)
i have the parent of (e.move_info.target_node.parent)

How can i do if i want to access to the parent of Moved_node ?
( i want to see if the moved node is root or not )

And can you tell me how i can add a node dynamically ?

Thanks a lot.

I don't see a way to append new data to an existing node when you click it. Is there a way to issue an ajax request for more data under a particular node and have this plugin append more nodes via JSON formatted responses?

If this already exists, is there any sample code anywhere?

my onCreateLi is an expensive operation. In some cases it will require some additional calls to the server and create dialogs, etc.

So, I have some template function for populating it li, so that it looks like this:

onCreateLi: (node, $li)-> $li.find('.title').html renderTemplate(node)

the renderTemplate will make some AJAX calls to fill a hidden dialog returned by renderTemplate with items from this call.

Something like:

The problem is that appendNode will remove all nodes and create all of them again on each call:

https://github.com/mbraak/jqTree/blob/dev/tree.jquery.coffee#L688
https://github.com/mbraak/jqTree/blob/dev/tree.jquery.coffee#L683

There is no need for appendNode to behave this way. This should be much less expensive operation and only append a node and eventually toggle the parent node to become a folder if it is the first element.

Even if you want to recreate the parent node, you could detach the children instead, create the parent node, re-attach them and append the new node. This should be much faster, but can also lead to unexpected results (just like the current situation). For example, one might want to attach some data to the ul element ($(ulElement).data 'some', 'thing'). When you remove and recreate the ul that data would be lost.

This is usually not expected. If you're just appending one node, the other nodes should remain intact. In a similar way, if you're removing a node, only that node and their children should be affected. Recreating the entire tree is way too expensive.

Could you please consider reducing the need for calling onCreateLi more than once for each new node?

Hi,
How can I change the icon set to (+ and -), for example if I click it will automatically to (ui-icon-minus) and for collapse (ui-icon-plus).

Thanks

It would be great if we could cancel the action of moving the node from inside the 'tree.move' handler.

For example, I'd like to ask for confirmation before moving the node. Is that possible currently?

If so, I couldn't find how to do that.

Thanks in advance,
Rodrigo.

i have a treeview build via getJSON data and a saveState = true.

i open some nodes and select one node.

when i reload the treeview the treeview reopen automatically the nodes and i see my latest selected node in highlight mode.

but when i try to do :

var node = $("#divTreeview").tree('getselectednode');

the node id null !

Hello,

I am playing around with the library and so far I love it, I just have one problem I can't get JSON to work.

I have my code setup to read a .php file which prints the results of the $('tree').tree('toJson'); back to the javascript file and it doesn't work. No errors or anything, I checked network and console.log and the data is being set.

It's just not printing it... I am using the same base data that is shown in the demo btw, nothing special.

JSON

[{"name":"node1","children":[{"name":"child1"},{"name":"child2"}]},{"name":"node2","children":[{"name":"child3"}]}]

Javascript

$(document).ready(function() {
$.getJSON("tree.php", function(data) {
return $("#tree1").tree({
data: data
});
});
});

PHP

• Steve

I used $(#'tree').tree({data:data, selectable:true}) but nothing seems to happen when I click on a node. I would like to be able to select/deselect nodes by clicking on it, and optionally fire an event handler.
I also did not see any styles defined for selected nodes in the stylesheet, do I need to do that myself?

I think i found a bug, ik wanted to use loadData, it didn't work because the node i got back from getNodeById was null. After a bit of searching i saw that the node_id & node.id in the getNodeById function are beeing compared with ===, instead of ==.

JqueryWidget.prototype.getNodeById = function(node_id) {
  var result;
  result = null;
  this.tree.iterate(function(node) {
    if (node.id === node_id) {
      result = node;
      return false;
    } else {
      return true;
    }
  });
  return result;
};

jqTree is awesome btw, i love it :)