treeview using jquery

Question

Hi  Folks,

 

I ahve created a treeview using jquery that treeview contains folder structure and file name. i am populating my treeview using  one js file . there are various parent nodes child nodes and sub child nodes are there. Now i want to give a search functionality to user if he types any letter of filename that parent node and therir child node should open and highlight th file. because there are lots of file and folders its very difficult for user to search one one file.

 

 I want full code  

Answer 1

Hi Hemant,

CoolJSTree is bit different. To get the file element from javascript, the tree should expand atleast once.. The span / anchor tags are rendered only on expand option. So I made expand all on tree load. Whenever you try to search some file, the tree will collapse and expand only the result tree hierarchy. Here is my code.. I have tried "PIP", it works fine..  Please let me know if you need any clarifications.

 

 

<script>

alert('started in index.jsp');

var tree1 = new COOLjsTree("tree1", TREE_NODES, TREE_FORMAT);

tree1.expandAll();

alert('ended in index.jsp');

$(function() {

$('#submit').on('click', function() {

tree1.collapseAll();

var results = $("a.treeNode[href^='download_documents.jsp']:contains('" + $('#search').val() + "')");

if (results.length == 0) {

alert("file not found!");

return false;

}

var targetElement = $(results[0]);

var targetAnchor = targetElement.is("span") ? $(targetElement.parent()[0]) : targetElement;

var targetUrl = targetAnchor.attr('href').replace(targetAnchor[0].protocol + '//' + targetAnchor[0].host, "");

var targetNodeIndex = tree1.nodeByURL(targetUrl).index;

var node = tree1.nodeByIndex(targetNodeIndex);

var expandList = [];

while (node.parentNode != null && node.parentNode.index > -1) {

if (!node.parentNode.expanded) expandList.push(node.parentNode.index);

node = node.parentNode;

}

expandList.reverse();

$.each(expandList, function(index, v) {

tree1.expandNode(v, true, true);

});

tree1.draw();

return false;

});

});

</script> 

Answer 2

hii harish

i have attached my source code please go through. set start page as newtree.aspx and see .

 

Answer 3

Can you share the code which you wrote for treeview display. so that we can try for search functionality...