treeview in jquery or javascript

Hello all and thanks ahead,
Can anyone help a newbie with a treeview in jquery or javascript? I am wanting particular behaviour from the tree. I don't want the drill handles (plus-minus sign). I want the text to be clickable to expand or collapse the tree item. I would also like to have the ticking/line that connects/illustrates the parent/child connection. Also I need the tree to be lazy loading/asynchronus..it would be nice to show a loading gif while waiting for the children to load. I have attempted to run the ExtJS jquery examples on the treeview, but have not been able to duplicate their examples. Could anybody provide an example?
Thanks.
jerryleeclarkAsked:
Who is Participating?
 
jerryleeclarkAuthor Commented:
senthurpandian: great example, i do like the behaviors. Can you give me some help to get the example to run locally on my pc? I have downloaded the example. I have a jqueryFileTree folder. Inside that folder i have: demo folder with several levels of New Folders and New Text Document.txt files. An images folder copied from the download. An index.html file I created from copying the source from your example. jquery.easing.js, jquery.js (1.4), jqueryFileTree.css, jqueryFileTree.js, jqueryFileTree.php from the connectors folder in the download. The problem seems to be that the page does not find the files and folders in the demo folder. Thanks for the quick reply.
0
 
StealthyDevCommented:
Actually, the link i have provided you is to display the server side folders in a web-page; whereas, we can customize it for our need as it just loads the HTML-list for the AJAX page.

May i know what is the purpose of your Tree-View? So that I can help you build your AJAX-server page.

Regards,
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
jerryleeclarkAuthor Commented:
Ok, I have had some time to figure out some of what is going on in this example (remember I am fairly new to JS, jquery, web stuff in general). Yes, the backend scripts are for displaying folder/file structure where ever the page is hosted...in a demo folder. My investigation really was the tree piece written in javascript but I can see that if one is to build an asynchrous tree you are locked into a call back situation placing the work in the backend script. My application will talk to network devices. Each click of a node or leaf will require a back and forth conversation to these devices. Rather than get into the muckery of all that detail, I have come up with a perl script just to load the tree and to be able to test the code on my local pc using the perl interpreter also loaded locally. I have just yesterday started using the Komodo Edit program so I think I should be able to view the html/javascript/perl locally w/o a web server. Right now the perl script does not introduce a simulated delay but if I can get the whole project working..I will add the delays. Right now I am trying to piece this together with minimum code so I can understand what is going on. I have modified/renamed pretty heavily the example code you suggested. In my Komodo viewer I can get the treeview to load but its the raw perl script..but the links do act as tree elements so I feel like I am close to being able to figure it out, but it still does not work correctly. I can see parts of the code that are not right..like where does the root come from..but am still strugling with what is going on in bits of the code. Any input would be great. I will attempt to upload the files, I had to rename DummyTree.pl to DummyTree.txt and the project file MyProject.kpf to MyProject.txt
TreeView.zip
0
 
StealthyDevCommented:
Hi again.

Please find a sample output of your AJAX page.

(You need to return something like this from your server side page. May be Perl/ASP/JSP)

Warm Regards.

DummyTree.txt
0
 
jerryleeclarkAuthor Commented:
please give me a few more days, i have made some progress based on your help but i wanted to post my solution before giving points.
0
 
jerryleeclarkAuthor Commented:
senthurpandian:
I am very sorry it took so long. I had to start from scratch on perl, javascript, jquery and vi. I was able to manipulate the example you cited into something I was looking for. For others looking in, you will have to rename Tree.txt to Tree.pl. The perl script can run one of two 'sub's. Just uncomment out the one you want to see and comment out the other. The files were edited in vi so windows users may have to correct all the carriage returns :(.  Thanks again senthurpandian!!
DemoTree.zip
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.