YUI Treeview inline editing and dynamic node loading

Sai selline pealkiri pandud ennekõike seetõttu, et emakeeles kõlaks asi päris hirmsalt...

YUI treeview

Üldiselt Yahoo poisid teinud palju Web 2 stiilis komponente. Seekord vaataks Treeviewd.

Tüüpiline laadimise kood (2.6.0 ver):





function overrideSaveValue(v)
{
  node=v.node;
  //node.data.label = v.inputElement.value;
  node.getLabelEl().innerHTML=v.inputElement.value;
  alert(node.data);
  return true;
}


function idynLoad(node, fnLoadComplete)
{


     // lihtne json callback näide, success parameetrid sõltuvad kuidas välja kutsud
     var oCallback =
                 {
                  success: function(oRequest,oResponse,oPayload)
                    {

                            var   iNode = new YAHOO.widget.TextNode("test", oPayload.node, false) ;    
       iNode.data=...mingi json abil saadud elemendi id;
       iNode.editable=true; // märgime, et inline editing lubatud
                                   // kavalus laeme nö default handleri üle, et saaksime async stiilis andmebaasi kirjutada andmeid, kui nodet inline stiilsi muudetakse
              iNode.saveEditorValue=overrideSaveValue;         
    
       // anname teada, et child item laetud !
                             oPayload.fnLoadComplete();
                       },
  
    failure: function(oRequest,oResponse,oPayload)
                   { 
          oPayload.fnLoadComplete();
                    },
  
                   argument:
     {
                       "node": node,
                       "fnLoadComplete": fnLoadComplete
                           },
  
         timeout: 10000
  };

 // json väljakutse...
 
... 
}

// loome puu...
var tree = new YAHOO.widget.TreeView("container");
var rootnode = tree.getRoot(); 
  
    tree.setDynamicLoad(idynLoad, "ygtloading ygtvlph ");

// teeme ühe root elemendi...
var myroot = new YAHOO.widget.TextNode('Root node', rootnode, true);
     myroot.data=0;
     myroot.editable=false;

     // võimaldame inline editi !!!!
     tree.subscribe('dblClickEvent',tree.onEventEditNode);        
     
     // joonistame puu       
     tree.render();

      

Nii lihtne see ongi :))))))