Skip to content

Instantly share code, notes, and snippets.

@Znarkus
Created September 11, 2010 19:34
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Znarkus/575480 to your computer and use it in GitHub Desktop.
Save Znarkus/575480 to your computer and use it in GitHub Desktop.

Requires a function getItemIdFromElement($element) It should take a jQuery collection, and returns an identifier for that element.

getOrder returns a flat array with object similar to the following.

{
  level: 0,
  parent: 0,
  id: 1
}

This was created for the jQuery Nested Sortable plugin.

Example implementation.

var saveOrder = function(){
	var data = getOrder($('#menu-overlay-index-menu'));
	
	$.ajax({
		url: '/a;menu/menuoverlay/save',
		type: 'post',
		data: { data: data },
		error: function(){
			alert('An error occurred while saving');
		}
	})
};

$('#sorted-ul-list').nestedSortable({
	[...]
	update: saveOrder
});
var getOrder = function($ul){
var $li = $ul.find('li');
var isFirst = function($element){
return $element.prev().length === 0;
};
var isLast = function($element){
return $element.next().length === 0;
};
var hasChildren = function($element){
return $element.find('> ul > li:first').length === 1;
};
var checkDepth = function($start, selector){
var level = 0;
while (true) {
$start = $start.find(selector);
if ($start.length !== 0) {
level++;
} else {
break;
}
}
return level;
};
var level = -1,
parents = [0], // parents[level] = parent_id
prevWasLastSibling = false,
data = [];
$li.each(function(){
var $self = $(this);
if (prevWasLastSibling) {
level -= checkDepth($self.prev(), '> ul > li:last');
prevWasLastSibling = false;
} else if (isFirst($self)) {
level++;
}
data.push({
level: level,
parent: parents[level],
id: getItemIdFromElement($self)
});
if (hasChildren($self)) {
parents[level + 1] = getItemIdFromElement($self);
} else if (isLast($self)) { // Don't evaluate if hasChildren
prevWasLastSibling = true;
}
});
return data;
};
@Serhioromano
Copy link

Can you give an example for getItemIdFromElement($self);? I cannot figure our how to define that.

@Znarkus
Copy link
Author

Znarkus commented Mar 11, 2011

https://gist.github.com/816130

But as I said to another requester, it depends on your implementation. In our case the HTML markup is like:

<li id="menu-overlay-index-item-id-9912"></li>

getItemIdFromElement($that_li) will return 9912.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment