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 :))))))

Advertisements

Lisa kommentaar

Täida nõutavad väljad või kliki ikoonile, et sisse logida:

WordPress.com Logo

Sa kommenteerid kasutades oma WordPress.com kontot. Logi välja /  Muuda )

Google+ photo

Sa kommenteerid kasutades oma Google+ kontot. Logi välja /  Muuda )

Twitter picture

Sa kommenteerid kasutades oma Twitter kontot. Logi välja /  Muuda )

Facebook photo

Sa kommenteerid kasutades oma Facebook kontot. Logi välja /  Muuda )

w

Connecting to %s


%d bloggers like this: