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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.