Home » Forums » Other Topics » Other Topics

อยากทราบการใช้งาน YUI TreeView

  • warning: realpath() [function.realpath]: SAFE MODE Restriction in effect. The script whose uid is 1005 is not allowed to access /tmp owned by uid 0 in /var/www/sites/sugree/codenone.com/subdomains/www/html/includes/file.inc on line 190.
  • warning: realpath() [function.realpath]: SAFE MODE Restriction in effect. The script whose uid is 1005 is not allowed to access /tmp owned by uid 0 in /var/www/sites/sugree/codenone.com/subdomains/www/html/includes/file.inc on line 190.
Submitted by khao_lek on 22 August, 2007 - 11:52

อยากทราบการใช้งาน YUI TreeView
คือตอนนี้ผมสามารถสร้าง tree ได้จากตัวอย่างได้แล้วครับ
แต่อยากจะสร้างส่วนที่link จาำก tree ที่แสดงขึ้นมาเช่น
คลิ๊กที่ N แล้วแสดงตารางเช่น
A
|-B
|-N
| |-n
|-C
ตอนนี้ผมหา code ได้แล้วสำหรับการ click ที่label ในส่วนของ tree ครับ
แต่ว่าผมไม่เข้าใจว่าไอ้ node มันคืออะไรกันแน่ทำให้ผมไม่สามารถที่จะ
หา id ของ tree ที่ผู้ใช้งานเลือกได้นะครับ

//create a new tree:
tree = new YAHOO.widget.TreeView("treeDiv1");
 
//turn dynamic loading on for entire tree:
tree.setDynamicLoad(loadNodeData, currentIconMode);
 
//get root node for tree:
var root = tree.getRoot();
 
//add child nodes for tree; our top level nodes are
//all the states in India:
var aStates = ["Andhra Pradesh","Arunachal Pradesh""Pradesh","West Bengal"];
 
for (var i=0, j=aStates.length; i < j; i++) {
	var tempNode = new YAHOO.widget.TextNode(aStates[i], root, false);
}
var node
tree.subscribe("labelClick", function(node) {
	alert("โหนดที่ " + node.data.id + " ถูกคลิ๊ก..."); 
}); 
//render tree with these toplevel nodes; all descendants of these nodes
//will be generated as needed by the dynamic loader.
tree.draw();
‹ ช่วยกัน patch Firefox บน Mac OS X กับ Windows มะ? max sum ของ sub array ด้วย scheme (ไม่รู้ถูกเปล่านะครับ) ›
»
Submitted by pphetra on 22 August, 2007 - 22:23.

ยังไม่เคยใช้นะครับ
แต่อ่านจากเอกสาร และ code ผมได้ความว่า
จากประโยค

new YAHOO.widget.TextNode(oData, parent_node,  flag)

ถ้าดูใน TextNode.js
ถ้า obj เราเป็น string สิ่งที่มันทำก็คือ

// ใน node.js
this.data = oData;
 
// ใน Textnode.js
if (typeof oData == "string") {
   oData = { label: oData };
}
this.label = oData.label;

นั่นคือ
1. node.data เก็บ object ที่ pass ผ่าน contructur มา
2. label มันจะดูจาก property label ของ Object ที่ pass เข้ามา
แต่ถ้าเป็น String มันจะ convert ให้เป็น object ที่มี property label ก่อน

โดยปกติเวลาใช้งาน เรามักจะใช้ internal key ในการระบุ object มากกว่า label ของมัน
ดังนั้นเวลาเราสร้าง Node เรามักจะสร้างแบบนี้มากกว่า

myobj = { label: "mylabel2", id:"myid2" } ; 
var tmpNode2 = new YAHOO.widget.TextNode(myobj, xx, false);

เวลาเรา subscribe labelClick event
parameter node ที่ได้มาก็คือ TextNode (หรืออื่นๆ แล้วแต่ว่าเราเลือกใช้ node แบบไหน)
ซึ่งเราสามารถ access myobj ผ่านทาง node.data

ตัวอย่างที่เราเห็น ส่วนมากเขาจะใช้ id แทนความหมาย key
แต่เราอาจจะใช้อย่างอื่นก็ได้ เช่น

myobj = { label: "product-1", product_code: "x111"}
var tmpNode2 = new YAHOO.widget.TextNode(myobj, xx, false);
 
tree.subscribe("labelClick", function(node) {
	alert("product code " + node.data.product_code + "was clicked");
});
»

ย้าย Codenone

ประกาศย้าย Codenone ไปใช้ Forum ของ Blognone แทนครับ ตามไปตั้งกระทู้ต่อได้ที่ Codenone Forum (รายละเอียดอ่านจากกระทู้ ย้าย Codenone ไปรวมกับ Blognone)

กระทู้เก่าๆ จะย้ายตามไปในภายหลัง ตอนนี้ปิดการโพสต์กระทู้ไว้ เหลือไว้เฉพาะอ้างอิงเท่านั้น