Tree view using jquery

[lurtnowski]

I bought https://codecanyon.net/item/tree-filter-tree-view-with-filtering-and-multiselect/
and installed it
http://lukesspot.com/tree/filter_tree.html
I’d like to make a modification

1. Id like each child node in the menu to act as a link, so can change

            var tree = [
                {id: 1, parent_id: 0, name: "ADMS"},
                {id: 2, parent_id: 1, name: "ANCC"},
                {id: 3, parent_id: 1, name: "EHF"},
            ];

to

            var tree = [
                {id: 1, parent_id: 0, name: "ADMS"},
                {id: 2, parent_id: 1, name: "ANCC", url: "#adms-ancc"},
                {id: 3, parent_id: 1, name: "EHF", url: "#adms-ehf"}
            ];

then how do I make a window.location() event happen whenever a child node is selected?

[m3g4p0p]

@lurtnowski

I bought [url]

Hi @lurtnowski, I doubt that we are allowed to post modifications to this script on a public forum then. What you might try though is modifying the generated DOM afterwards by replacing the nodes’ hrefs:

const $nodes = $('[data-id]')

tree.forEach(item => {
  $nodes
    .filter((_, node) => Number(node.dataset.id) === item.id)
    .find('a')
    .prop('href', item.url)
})

Other than that, please carefully check your license first.

[Paul_Wilkins]

I recommend that you use a free jQuery tree viewer instead. The FileBrowser Demo (below the basic ajax demo) shown at https://www.jstree.com/demo/ is a good example of what it can do. Links are all supported too.

jstree

Oh, but you mentioned filtering too. JSTree supports searching, but just in case here’s another free jQuery library that also provides filtering of a tree view.

https://www.jqueryscript.net/layout/Filterable-Tree-View-Plugin-with-jQuery-Tree-Filter.html

I’ve found that frequently the paid ones don’t tend to give much of a benefit when it comes to this type of thing.

[lurtnowski]

live n learn, I am going with the 2nd one (would be cool if it was filterable), how do i activate it?
http://lukesspotcom.fatcow.com/tree/index.html

Oh, it does