Sunday, September 16, 2012

jQuery TreeView Plugin

jQueryUI 1.9 beta release added 3 new widgets (Menu, Tooltip, and Spinner) but still no tree view widget in picture though jQueryUI has the plan http://wiki.jqueryui.com/w/page/12138128/Tree. In the plan wiki page, it recommends 2 plugins:

http://www.jstree.com/
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

I once tried jquery.dynatree.js which supports checkbox and lazy loading of tree branches. In current project, once again there is tree view requirement (ajax/JSON, checkbox tree, optional sorting, optional lazy load tree branches), so it is better to list out some researched plugins for future reference. (I do hope jQueryUI can support tree widget soon).

jsTree (many features, and plugin friendly to support more functionality like checkbox plugin, JSON data plugin etc)

jQuery plugin: Treeview (not maintained any more, recommend jsTree and look forward to jQueryUI support of tree view)

jquery.dynatree.js (basically meet the tree view requirements my project wants, but not as famous as jsTree, and not actively developed)

jQuery File Tree (configurable, ajax file browser plugin for jQuery)

jQuery TreeView Menu (brings together all the most practical features requested in a Tree Menu into one awesome menu script)

jQuery Tree (jQuery UI widget that you can use to add advanced features to an html tree built using nested unordered lists, derived from jQuery checkboxtree plugin)

jQTreeTable (for tree table UI display)

I will compare jsTree and Dynatree to see which one is better for current project.

1 comment:

  1. Jquery is an advanced programming language. Treeview is a best approach to show large amount of data in hierarchical fashion. Compare to Server-side treeview client-side treeview helps to improve performance of a web application. How it is if after fetch data from the server will render those data using client script. There are various of languages using which we can create treeview. Lets talk about JavaScript. JavaScript is a client side language. To create a treeview using JavaScript we required to write more them 100 lines of code. The same treeview can achieved easily with less line of codes using JQuery. Look at this example http://jharaphula.com/jquery-treeview-example-using-html-ul-li-elements

    ReplyDelete