hummingbird-dev / hummingbird-treeview Goto Github PK

I have two treeviews on a single page and want 1 with and 1 without checkboxes.

When I call $('#treeview').hummigbird({checkboxes: 'disabled'}) the function does not process the passed options at all.

This is caused by the following check (on line 167 of hummingbird-treeview.js):
typeof(methodName) == "undefined"

As a result of this check, the passed object is completely ignored.
A possible workaround is changing the default options before and/or after the function call, but that's a little crude.

One of the solutions to fix this issue is to change that line to
typeof(methodName) !== "string"

No need for more description i guess. Even the demos doesn't work.

FontAwesome changed their syntax from using fa to two different types of icon, solid:fas and regular:far and this should be changed in the code as well.

Ref: https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4

Code change:

Removing fa and mentioning in the docs to use the icon class with either fas or far should do the job.
Thank you

After using $("#treeview").hummingbird("checkAll"); i can't expand the nodes. Even with prechecked items its not possible to expand or collapse.

Here's a jsfiddle: https://jsfiddle.net/4o1kh2nq/

What i want to achieve is:

• Some of the items will be checked already, but can be unchecked.

• Some of them might be checked already, but cannot be unchecked.

• I should be be able to collapse and expand each node.

This control is pretty great, thanks for sharing! However, it appears there isn't any way to provide the option to only select one node.

I tried to work around this using the nodeChecked event by unchecking all but the selected node. This ALMOST works, however it does not allow the selction of a parent node specifically if it also has children, because when you deselect those, it in turn deselects the parent!

I looked over the code to see if this is something I could easily modify but it looks like you're traversing on each action and I had trouble unwrapping it to make this optional.

I'd like to fork this project and give it a try, but do you have any notes that I could use to achieve this change? any insight you have would be very helpful and appreciated!

Hi! When I added simple code to disable each 2/3 items, i got problem with parent items. Some root items marked gray, but they still contain enabled items. Also when i enable items back in same way, signs "+" or "-" (to expand/collapse) staying gray.

The treeview is good however I did spend time trying to find out why it was not displaying the minus sign but was instead displaying a h. I had followed the instructions in the documentation but after many hours found out that it was a change in Font Awesome which appears to have occurred in version 5 - you need to include all.css.

    <link href="<path to fontawesome>/css/all.css" rel="stylesheet">

Hi,
Thanks for this amazing project.
I wanted to know whether there is any feature by which we give the data as a JSON, it will create the treeview.
For example:

{
    "name":"tree_view",
    "children":[ {
        "name":"TS2:1",
        "children":[ {
            "name":"TS1:1",
            "children":[ {
                "name": "TS3:1", "children": []
            }
            ,
            {
                "name":"TS4:2",
                "children":[ {
                    "name": "TS6:2", "children": []
                }
                ,
                {
                    "name": "TS5:1", "children": []
                }
                ]
            }
            ]
        }
        ]
    }
    ]
}

One way I can do this is by writing JS to create 'ul' and 'li' elements by traversing this json. But it would be great if this can be added in the project itself.

hello -can anyone provide a working example? Just doesn't work for me. Have hijacked this:

https://jsfiddle.net/z5amrc4x/1/

apologies if wrong

thanks in advance,
adrian

hi -is this possible? From what I've read, I don't think so? I can only disable the parent, but this is needed as a selectable option, just only when the children have been 'seen' -we're basically worried that some people are not going to realise there are child options and needlessly select them all. Having them all open at the start defeats the point of a tree...is there a way of achieving this? Apologies if I've missed something. I've tried checkboxesGroups = 'disabled' and clickGroupsToggle = 'enabled' but this doesn't allow the parent to be selected at all, so each child would need checking....but we might have to go this route

Hi, I've tried to use construct a Hummingbird treeview by using

$('#treeview').append('<...li>My tag');
$('#treeview').append('<...li>-My subtag');
$('#treeview').append('<...li>--My subSubtag');

(obviously without the ... dots inside the < li > )
and so on, but it's just not working. If I construct it directly from my html

Converter errors if there are any hypens in the text of your checkbox label.

Throws error:

The item after ' + treeText + ' has too much hyphens, i.e. it is too far intended. Note that down the tree, the items are only allowed to be intended by one instance, i.e. one hyphen more than the item before. In contrast, up the tree arbitrarily large jumps are allowed.

Example markup that fails:

<div class="hummingbird-treeview-converter">
        <li>Warner Bros.</li>
        <li>-Goodfe-llas</li>
        <li>--Robert De Niro</li>
        <li>--Joe Pesci</li>
        <li>-The Shawshank Redemption</li>
        <li>--Tim Robbins</li>
        <li>--Morgan Freeman</li>
        <li>Paramount</li>
        <li>-The Untouchables</li>
        <li>--Robert De Niro</li>
        <li>--Kevin Costner</li>
        <li>-Forrest Gump</li>
        <li>--Tom Hanks</li>
        <li>--Robin Wright</li>
</div>

It would be handy to be able to mark an item that should be checked in the pseudo html format, maybe using a data attribute, something like:

<div class="hummingbird-treeview-converter">
    <li>Warner Bros.</li>
    <li>-Goodfellas</li>
    <li>--Robert De Niro</li>
    <li>--Joe Pesci</li>
    <li data-checked>-The Shawshank Redemption</li>
    <li>--Tim Robbins</li>
    <li>--Morgan Freeman</li>
    <li>Paramount</li>
    <li>-The Untouchables</li>
    <li>--Robert De Niro</li>
    <li>--Kevin Costner</li>
    <li>-Forrest Gump</li>
    <li>--Tom Hanks</li>
    <li>--Robin Wright</li>
</div>

First thanks for your great script :-) But if I want to initialize a pseudo HTML with "expandAll", it dosen't work in the right way. I'll get a tree but it is not possible to collapse or expand it via mouse click. Also the checkboxes doesn't work in this case for sub checknoxes, independently which browser I use.

The only workaround I found was, first to initialize the tree without any parameter and after that to use "expandAll", but I think that's not the best way ;-)

$("#treeview").hummingbird();
$("#treeview").hummingbird("expandAll");

Thanks for the plugin! Is there a CDN for Hummingbird Treeview?

could you add package.json file and register library on npm? it could make it possible to add library to another projects as a dependency, without downloading, it would be great.

Hello,

I'm trying :

    $.fn.hummingbird.defaults.collapseAll= true;
    $("#treeview").hummingbird();

I think collapseAll is already defined at true from the read me.

$("#treeview").hummingbird("collapseAll"); 

But it's close all node and i can't open them?
Do you have an idea? thanks !

var converter_height = converter.data("height");
var converter_scroll = converter.data("scroll");
var converter_id = converter.data("id");
//alert(converter_id);
if (converter_scroll == "true") {
converter_scroll = "overflow-y: scroll;";
} else {
converter_scroll = '';
}
if (converter_height == undefined) {
converter_height = '';
} else {
converter_height = "height:"+ converter_height +";";
}
if (converter_id == undefined) {
//alert(converter_id);
converter_id = "";
}

var tree_html = '
div id="treeview_container' + converter_str + '" class="hummingbird-treeview" style=' + converter_height +' ' + converter_scroll + '">' +
' ul id="treeview' + converter_str + converter_id + '" class="hummingbird-base" >';

html will not work in these ugh

this will fix your code for it to work again.

Hi,

How to retrieve direct node object reference to the changed nodes only ?

With that :

//initial state
$old = [];
$("#treeview").hummingbird("getChecked", {attr:"id", list:old, onlyEndNodes:true});

//event
$("#treeview").on("CheckUncheckDone", function(){
var current = [];
$("#treeview").hummingbird("getChecked", {attr:"data-index", list:current, onlyEndNodes:true});
var listAdd = $(current).not(old).get();
var listRemove = $(old).not(current).get();
if (listAdd.length > 0) {
$.each( listAdd, function( key, value ) {
...
});
}
if (listRemove.length > 0) {
$.each( listRemove, function( key, value ) {
...
});
}
old = current;
});

Is there a better way to do that ? Methods to access directly the nodes changed ?

Thanks

This tool is awesome.

And I have a question to reach out: how do I change the foreground text color of end node which class is 'hummingbird-end-node' like:
item = item + '<label ' + data_str + '>' + "\n";
item = item + ' ' + treeText;
item = item + '' + "\n";

I have defined data_str in 'li' tag:
li id="id_str" data-str='style="color:green;" '>--Robin Wright</li
But the text color is still:
label style="color: rgb(0, 0, 0);"

Appreciate if you have time to help on this.

Hi,
I would like to ask if it is possible to reload treeview from javascript, when I delete <li> elements and set new ones?

Thanks

Not a critical issue!

I was using a dot ('.') in the data-id of a specific (placeholder) node.

addNode is not able to find this node by data-id.

Line 606 of hummingbird-treeview.js is currently:
var that_node = tree.find('input:checkbox[' + anchor_attr + '=' + anchor_name + ']').parent("label").parent("li");

One possible fix is to enclose the anchor_name in double-quotes:
var that_node = tree.find('input:checkbox[' + anchor_attr + '="' + anchor_name + '"]').parent("label").parent("li");