- PVSM.RU - https://www.pvsm.ru -
Здравствуйте Читатели!
Сейчас буду рассказывать об одном «дереве».
Зачем и почему нужны «деревья» – Вы знаете лучше меня.
Понадобилось для одного проекта «дерево» (tree view).
Известные реализации от:
и т.п. не устраивали по разным причинам.
Для самых нетерпеливых: ссылка на пример в работе [6].
Основные features:
Основные anti-features:
Есть какая-никакая документация там же [7].
Частично приведу её здесь:
$('#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
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/6019
Ссылки в тексте:
[1] http://www.jstree.com/: http://www.jstree.com/
[2] http://bassistance.de/jquery-plugins/jquery-plugin-treeview/: http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
[3] http://dhtmlx.com/docs/products/dhtmlxTree/index.shtml: http://dhtmlx.com/docs/products/dhtmlxTree/index.shtml
[4] http://dojotoolkit.org/documentation/tutorials/1.7/store_driven_tree/demo/demo.html: http://dojotoolkit.org/documentation/tutorials/1.7/store_driven_tree/demo/demo.html
[5] http://demo.qooxdoo.org/devel/showcase/#tree: http://demo.qooxdoo.org/devel/showcase/#tree
[6] ссылка на пример в работе: http://wentout.github.com/customTree/#how_to_example
[7] документация там же: http://wentout.github.com/customTree
Нажмите здесь для печати.