👨🏻‍✈️ 🌌 😔 カスタムツリービュー ↘️ 🧙 📱

こんにちは、Habralyudi！

次に、1つの「ツリー」について説明します。

「木」が必要な理由と理由-あなたは私よりもよく知っています。

1つのプロジェクトのツリービューを使用しました。

個人的に重要/重要な順に既知の実装：

つまり、私は「それらを見た」と言うことができます。

UPD：

まず、与えられた例を非常に尊重していることに注意したい。

第二に、このコンポーネントは多くの点で多くを失います。

第三に、例えば、少なくともjsTreeに似たものを取得するには、多くのコードを書く必要があります。

しかし、それでも、コンポーネントを提出することにしました。

最もせっかちな人のために：作業中の例へのリンク。

主な機能：

ツリー全体が要求されます
部品からの要求
指定されたノードにロードされます
多くのことは高度にカスタマイズ可能です
ほとんどどこにでもデフォルトの動作があります
クッキー保存
バックエンドの独立性
自分で考える
など

基本的なアンチ機能：

ツリー全体が要求されます
部品からの要求
指定されたノードにロードされます
これは「新しいもの」です
バックエンドの独立性
コンポーネント「1週間なし」-湿気
ソースにコメントはありません
自分で考える
など

同じ場所に何らかのドキュメントがあります。

ここで部分的に説明します。

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

葉とは：

 /* { 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 } } } */

なぜならすべてがそこにある、それは簡単なようだ、そして私はコメントでQ＆Aを待っています。

カスタムツリービュー

More articles: