jQuery File Tree Modifications

I had a need to have a file selection ability so I modified the jQuery File Tree from “A Beautiful Site”┬áto have this capability. The code for the file tree is very concise and straight forward so it is not complicated to do this modification. The red text was the added code which allows selections using the shift and control keys.

function bindTree(t) {
	$(t).find('LI A').bind(o.folderEvent, function(event) {
		if( $(this).parent().hasClass('directory') ) {
			..................
			}
		} else {
		  if (event.shiftKey) {
		    var first = false;
		    var found = false;
		    var rel = $(this).attr('rel');
		    $(this).parent().parent().find('A').each(function(n) {
			if (!found || !first) {
			  if ($(this).attr('rel') === rel) {
		             found = true;
			  } else {
			     if ($(this).hasClass('selected') && !first) {
				first = true;
			  }
		        }
			if (first || found) {
			  $(this).addClass('selected');
			}
		     } else {
			$(this).removeClass('selected');
		     }
		    });
		} else {
		   if (event.ctrlKey) {
		     $(this).toggleClass('selected');
		   } else {
		      var has = $(this).hasClass('selected');
		      $(this).parent().parent().find('A').removeClass('selected');
		      if (false === has) {
			 $(this).addClass('selected');
		      }
		}
	     }
	     h($(this).attr('rel'));
}
return false;
});

In the .css file add the following to make selected items to display blue text;

UL.jqueryFileTree A.selected {
color: #0000ff;
}

Finally to obtain the selected items do something like this;

$('#button').on('click', {}, function() {
var files = '';
$('#filetree').find('LI A.selected').each(function(index){
files += $(this).attr('rel')+';';
});

Comments are closed.