Custom Tree View

Здравствуйте Читатели!

Сейчас буду рассказывать об одном «дереве».

Зачем и почему нужны «деревья» – Вы знаете лучше меня.

Понадобилось для одного проекта «дерево» (tree view).
Известные реализации от:

• http://www.jstree.com/
• http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
• http://dhtmlx.com/docs/products/dhtmlxTree/index.shtml
• http://dojotoolkit.org/documentation/tutorials/1.7/store_driven_tree/demo/demo.html
• http://demo.qooxdoo.org/devel/showcase/#tree

и т.п. не устраивали по разным причинам.

Для самых нетерпеливых: ссылка на пример в работе.

Основные features:

• Всё дерево запрашивается
• Запрашивается частями
• Подгружается в указанные узлы
• Очень многое сильно настраивается
• Практически «везде» есть поведение «по умолчанию»
• Сохранение состояния через cookie
• Независимость от backend
• Think by Youself
• etc.

Основные anti-features:

• Всё дерево запрашивается
• Запрашивается частями
• Подгружается в указанные узлы
• Это «что-то новое»
• Независимость от backend
• Компоненту «без году неделя» – сыровато
• В source нет comments
• Think by Youself
• etc.

Есть какая-никакая документация там же.

Частично приведу её здесь:

$('#tree_content_div').treeControl( {
	// как будет выглядеть запрос верхнего уровня
	  root		: 'top'

	// callback, который вернет "имя" листа
	, name		: function( obj ){ return obj.name; }

	// название темы в CSS
	, theme		: 'custom'

	// callback, где можно вывести некоторые messages
	, info		: function( data ){ alert(data); }

	// скорость анимации
	, animate	: 1500

	// лучше посмотреть доку
	, preloader	: 2

	// классы 
	, classes	: {
		  treeLeaf	: 'tree-leaf'
		, heading	: 'heading'
		, control	: 'control'
		, status	: 'status'
		, loader	: 'loader'
		, selected	: 'selected'
		, preloader	: 'preloader'
		, hover		: 'hover'
	}


	// лучше посмотреть доку
	, control		: { text : ['+', '–'], cls : 'open' }

	// $.tmpl() шаблон узла
	, template		: 
		'<li><span class = "heading">${obj.name}</span>
			<ul class = "tree-leaf"></ul></li>'
			
	// шаблон управляющего элемента +- НЕ $.tmpl()
	, ctrlTpl		: '<span class = "control"></span>'

	// шаблон дополнительного элемента "статуса"    НЕ $.tmpl()
	, statusTpl		: '<span class = "status"></span>'

	// можно bind на управление, выделение, 
	// потерю выделения, добавление узла
	, handlers		: {
		  control	: function( leaf ){ }
		, select	: function( leaf ){ }
		, blur		: function( leaf , result ){ 
			if (something){
				// Your Great Checking / Blocking code
			}else{
				result(); 
			}
		}
		, leafsAdd	: function( leaf ,  controlObject ){ }
	}

	// можно bind на ... понятно
	, callbacks		{
		  click		: function( leaf ){ }
		, mouseover	: function( leaf ){ }
		, mouseout	: function( leaf ){ }
	}
	
	// сохранять или нет состояние, зависит от наличия $.cookie
	// если saveState не определен -- ничего не будет храниться
	, saveState		: {
		  name	: 'tree_control_cookie_name'
		, opts	: { expires: 150 }
	}
	
	// самая сложная часть -- то, что возвращает узлы, см пример:
	, ws			: function( val, callback ){

	try{
		var val = ( typeof( val ) == 'string' ) ? 
			{ 'leaf' : val , action : 'get' } : 
				( ( typeof( val ) == 'object' ) ?
					val : false );
		if( val ){
			$.ajax( {
			
			  type: "POST"
			, async: true
			, data : val
			, dataType : 'text'
			, url: './tree.php'
			, success: 
			function( data ){ 
				if( data !== ''){ callback( data ); } 
			}
			, error: function(data){ alert(data); }
			
			} ) ;
		}
	}catch(e){ alert(e); }

	}
	
	
} );

Что такое leaf:

/*
{
	name 	: 'leaf.name from JSON received through 'ws', e.g. ID'
	obj		: {
		  name		: ' returned by x.name( leaf ) '
		, children	: ' array of leafs that are children of this '
		, parent	: 'link to parent'
		, obj		: 'JSON that comes from ws'
		, elem		: {
			  li		: DOM of this leaf's LI 
			, ul		: DOM of this leaf's UL 
					(where children are)
			, heading	: DOM of heading span
			, control	: DOM of control span
			, status	: DOM of status span
		}
	}
}
*/

Т.к. там всё, вроде бы – просто, то жду q & a в comment'ах.

Автор: wentout