LiveFLEX jQuery Sortable Treeview

Lightweight and flexible jQuery treeview that supports drag and drop of items and multiple callbacks.

The treeview has been designed for LiveFLEX cms and is used in production code.

• Collapses nested ULs and adds .parent class
• Allows internal markup with callbacks inside the nodes
• Sortable with two ways to get the movement information
• Calls back for directory click, node click, items moved and custom callbacks

Download LiveFlexTree.zip

Demo

Just click on a few things, drag some pages around and click on save.

Usage

The only thing that the plugin requires is a data-id attribute on each <li>. This is what we use to identify the node. In this example we use an integer that ties to a database record but you could use a path or custom data.

Options

The code below creates a treeview from the markup and ties in all its callbacks to illustrate how to use them.

var tree = $("ul.tree").liveflex_treeview({
	handle:"a.caption" //the selector that starts the drag
	,callbackSelector: "span.callback" //the selector that fires callbacks
	,callback: function(e){
		//function that's called when an item meeting the callback selector is clicked.
		//Just checking for an extra class to use different items, you could also use rel or data
		if($(e.target).hasClass("op2")){
			log($(e.target).closest("li").find(">a").text() + " > (callback 2)");
		}else{
			log($(e.target).closest("li").find(">a").text() + " > (callback 1)");
		}
	},itemMoved: function(csv){
		//the csv of the moved items [ItemId]-[NewParentId].[Position]
		$("#MoveResults").html(csv);
	},dirClick: function(node){
		//directory was clicked
		log(node.find(">a").text() + " > " + (node.hasClass("collapsed") ? " closed" : " opened"));
	},nodeClick: function(node){
		//node was clicked
		log(node.find(">a").text() + " > selected");
	}
});
$("#save").click(function(e){
	//get the moved items as id-parentId.position, used for db update
	log(tree.data("liveflex.treeview").getMoved());
	//or get the tree as a nested array, to process further
	var treeArray = tree.data("liveflex.treeview").parseTree();
});

Loading nodes dynamically

You can easily load nodes on request by responding to the dirClick event

dirClick:function(node){
	var Id = parseInt(node.attr('data-id')); //get the data id
	if(node.children('ul').length  == 0){ //if the node hasn't any children yet
		//call your server routine
		$.ajax({
			url: "getNodes.aspx?id=" + Id,
			success: function(data){
				//append the new li's
				node.append('<ul>' + data + '</ul>'); 
				//add expanded class so the folding works 
				node.addClass('expanded'); 
			} 
		}); 
	} 
}