Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view plugin for jQuery with support for persistence, keyboard, checkboxes, tables, drag'n'drop, and lazy loading.
Top 5: Best tree view jQuery and Javascript plugins
Published :
Last modification :
27186 views
You may want to leave aside the task of create your own treeview for display a filelist or other kind of treeview as there are many plugins that does the trick for you.
These treeview plugins are the best Open Source TreeView plugins that you can find for javascript and jQuery.
Bootstrap treeview is a simple and elegant solution to displaying hierarchical tree structures (Tree view) while leveraging the best that Twitter Bootstrap has to offer. Allow events callback as nodeSelected, nodeChecked, nodeExpanded etc. Icon customization (font awesome or glyphicons).
jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources, AJAX & async callback loading. jsTree functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive design, that can easily be customized. It uses jQuery's event system, so binding callbacks on various events in the tree is familiar and easy.
drag & drop support.
keyboard navigation.
inline edit, create and delete.
tri-state checkboxes.
fuzzy searching.
customizable node types.
jsTree allows you to populate the tree view using HTML, Javascript or JSON data.
Fancytree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, tables, drag'n'drop, and lazy loading. This plugin provides a really huge of builtin optional plugins like :
Inline edit (allow you to change node titles using inline editing).
Drag n drop (Drag of tree nodes (inside the same or between different trees) behave like a standard jQuery UI draggable, i.e. allow dropping of nodes on standard droppables. behave like a standard jQuery UI droppable, i.e. allow dropping of standard draggables).
Plays nice with FontAwesome.
A lot of callbacks to customize almost everything.
Multiple themes but customizable if you want.
A friendly API that allow you to add nodes dinamically to the selected node.
jquery-bonsai is a lightweight jQuery plugin that takes a big nested list and prunes it down to a small expandable tree control. Also includes support for checkboxes (including 'indeterminate' state), radio buttons and for populating the tree using a JSON data source. Very useful if you want a minimalist use and customize it by yourself.
Treed is a curious treeview plugin which allow you to display , edit dinamically data in a treeview, it supports undo manager. Treed is constructed using the MVC pattern such that it is simple to, for example, create an entirely different view for the tree.
You can also create your own "Node" class if you wanted to do more than just have a single text input. You could add buttons, more fields, whatever you want. (note that the right side graphic is built with d3.js, not the library itself)
If you know another awesome TreeView plugin, please share it with us in the comment box. Have fun
jQuery Templates is no longer in active development, and will be superseded by JsRender. See vBeta1.0.0 tag for released beta version. Requires jQuery version 1.4.2.
Note: This is the original official jQuery Templates plugin. The project was maintained by the jQuery team as an official jQuery plugin. Since the jQuery team has decided not to take this plugin past beta, it has been returned to the principal developer's GitHub account (Boris Moore). For more information on the history of jQuery Templates, and the roadmap going forward, see jQuery Templates and JsViews: The Roadmap
jQuery templates contain markup with binding expressions ('Template tags'). Templates are applied to data objects or arrays, and rendered into the HTML DOM
Note that documentation for the jQuery Templates plugin is no longer maintained on the jQuery documentation site.
An archive copy of the original documentation (previously at api.jquery.com/category/plugins/templates/) can be found here.
The template parameter can be any of the following:
A string containing markup.
An HTML element (or jQuery object that wraps an element) whose content is to be used as the template.
A string corresponding to the name of a named template (see jQuery.template() and .template()).
A compiled-template function (see jQuery.template() and .template()).
If data is an array, the template is rendered once for each data item in the array. If data is an object, or if the dataparameter is missing or null, a single template item is rendered.
The return value is a jQuery collection of elements made up of the rendered template items (one for each data item in the array). If the template contains only one top-level element, then there will be one element for each data item in the array.
To insert the rendered template items into the HTML DOM, the returned jQuery collection should not be inserted directly into the DOM, but should be chained with .appendTo, .prependTo, .insertAfter or .insertBefore, as in following example:
The following example shows how to use jQuery.tmpl() to render local data, using a template provided as a string:
var movies = [
{ Name:"The Red Violin", ReleaseYear:"1998" },
{ Name:"Eyes Wide Shut", ReleaseYear:"1999" },
{ Name:"The Inheritance", ReleaseYear:"1976" }
];
var markup ="<li><b>${Name}</b> (${ReleaseYear})</li>";
// Compile the markup as a named template$.template( "movieTemplate", markup );
// Render the template with the movies data and insert// the rendered HTML under the "movieList" element$.tmpl( "movieTemplate", movies )
.appendTo( "#movieList" );
Using Remote Data
Typically the data is not local and is instead obtained using an Ajax request to a remote service or page, as in the following example:
var markup ="<li><b>${Name}</b> (${ReleaseYear})</li>";
// Compile the markup as a named template$.template( "movieTemplate", markup );
$.ajax({
dataType:"jsonp",
url: moviesServiceUrl,
jsonp:"$callback",
success: showMovies
});
// Within the callback, use .tmpl() to render the data.functionshowMovies( data ) {
// Render the template with the "movies" data and insert// the rendered HTML under the 'movieList' element$.tmpl( "movieTemplate", data )
.appendTo( "#movieList" );
}
The Markup for the Template
You can get the markup for the template from inline markup in the page, or from a string (possibly computed, or obtained remotely). For an example of how to use inline markup, see .tmpl().
Caching the Template
When a template is rendered, the markup is first converted into a compiled-template function. Every time $.tmpl( markup , myData ).appendTo( "#target" ) is called, the template is recompiled. If the same template is to be used more than once for rendering data, you should ensure that the compiled template is cached. To cache the template when using markup that is obtained from a string (rather than from inline markup in the page), use $.template( name, markup ) to create a named template for reuse. See jQuery.template().
Template Tags, Expressions, and Template Variables
Template tags such as the ${} tag can used within jQuery templates in addition to text and HTML markup to enable a number of scenarios such as composition of templates, iteration over hierarchical data, parameterization of template rendering, etc. Template tags can render content based on the values of data item fields or template variables such as $item(corresponding to the template item), as well as expressions and function calls. See the documentation topics for each template tag: ${}, {{each}}, {{if}}, {{else}}, {{html}}, {{tmpl}} and {{wrap}}.
The options Parameter, and Template Items
Each template item (the result of rendering a data item with the template) is associated with a tmplItem data structure, which can be accessed using jQuery.tmplItem() and .tmplItem(), or the $item template variable. Any fields or anonomyous methods passed in with the options parameter of jQuery.tmpl() will extend the tmplItem data structure, and so be available to the template as in the following example:
var markup ="<li>Some content: ${$item.myMethod()}.<br/>"+" More content: ${$item.myValue}.</li>";
// Compile the markup as a named template$.template( "movieTemplate", markup );
// Render the template with the movies data$.tmpl( "movieTemplate", movies,
{
myValue:"somevalue",
myMethod:function() {
return"something";
}
}
).appendTo( "#movieList" );
Examples:
Example: Render local data using jQuery.tmpl().
<!DOCTYPE html>
<html>
<head>
<scriptsrc="http://code.jquery.com/jquery-latest.min.js"></script> <scriptsrc="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
<ulid="movieList"></ul>
<script>var movies = [ { Name:"The Red Violin", ReleaseYear:"1998" }, { Name:"Eyes Wide Shut", ReleaseYear:"1999" }, { Name:"The Inheritance", ReleaseYear:"1976" } ];var markup ="<li><b>${Name}</b> (${ReleaseYear})</li>";/* Compile the markup as a named template */$.template( "movieTemplate", markup );/* Render the template with the movies data and insert the rendered HTML under the "movieList" element */$.tmpl( "movieTemplate", movies ) .appendTo( "#movieList" ); </script>
</body>
</html>
Example: Render data from a remote service, using jQuery.tmpl().
<!DOCTYPE html>
<html>
<head>
<scriptsrc="http://code.jquery.com/jquery-latest.min.js"></script> <scriptsrc="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
<buttonid="cartoonsBtn">Cartoons</button>
<buttonid="dramaBtn">Drama</button>
<ulid="movieList"></ul>
<script>var markup ="<li><b>${Name}</b> (${ReleaseYear})</li>";/* Compile the markup as a named template */$.template( "movieTemplate", markup );functiongetMovies( genre, skip, top ) {$.ajax({ dataType:"jsonp", url:"http://odata.netflix.com/Catalog/Genres('"+ genre+"')/Titles?$format=json&$skip="+ skip +"&$top="+ top, jsonp:"$callback",success:function( data ) {/* Get the movies array from the data */var movies =data.d;/* Remove current set of movie template items */$( "#movieList" ).empty();/* Render the template items for each movie and insert the template items into the "movieList" */$.tmpl( "movieTemplate", movies ) .appendTo( "#movieList" ); } }); }$( "#cartoonsBtn" ).click( function() {getMovies( "Cartoons", 0, 6 ); });$( "#dramaBtn" ).click( function() {getMovies( "Drama", 0, 6 ); }); </script>
</body>
</html>
See the change log for details.
