Custom Tree View

Hello Habralyudi!

Now I will talk about one "tree".

Why and why we need "trees" - you know better than me.
')
It took for one project "tree" (tree view).
Known implementations in order of importance / significance for me personally:

• 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

That is, one can say that I “stared at them”.

UPD:
Firstly, I want to note that I greatly respect the examples given.
Secondly, this component loses much in many ways.
Thirdly, to get at least something similar to jsTree, for example, you will need to write a lot of your code.

But, nevertheless, I decided to sip my component.

For the most impatient: a link to the example in the work .




Main features:

• All tree requested
• Requested in parts
• It is loaded into the specified nodes
• Very much much customizable
• Practically “everywhere” is “default behavior”
• Cookie state saving
• Backend independence
• Think by Youself
• etc.

Basic anti-features:

• All tree requested
• Requested in parts
• It is loaded into the specified nodes
• This is something new"
• Backend independence
• Component "without year week" - damp
• There are no comments in source
• Think by Youself
• etc.

There is no documentation in the same place .

Partially bring it here:

$('#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); } } } ); 

What is leaf:

 /* { name : 'leaf.name from JSON received through 'ws', eg 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 } } } */ 

Because everything is there, it seems to be simple, then I am waiting for q & a in comment.