ปัญหามีอยู่ว่า ปกติแล้ว เมื่อเราต้องการแสดงผลรายการข้อมูลเป็นตารางและเตรียมไว้สำหรับ submit ไปยัง server เรามักจะสร้างตารางโดยใช้ form และ input ดังเช่น
<form><table>
<tr><td>Check</td><td>Title</td><td>Description</td></tr>
<tr><td><input type="checkbox" name="item0" value="1234"></td><td>Item 0</td><td>This is the first item.</td></tr>
...
</table></form>
ในตัวอย่างนี้ ใช้ checkbox เพื่อให้ผู้ใช้เลือกรายการที่ต้องการ ในขณะที่ submit form เราสามารถตรวจสอบ ค่า checked ของแต่ละ elements ใน form ได้ว่า ผู้ใช้เลือกหรือไม่เลือกอะไร และสามารอ่านค่า value ซึ่งโดยปกติแล้วจะใส่รหัสของรายการข้อมูลนั้นๆไว้ เพื่อให้สามรถเอารหัสนี้ไปค้นในฐานข้อมูลและจัดการประมวลผลต่อไปได้ แต่ในความเป็นจริงแล้ว เราได้ค้นข้อมูลมาครั้งหนึ่งแล้วตอนที่สร้างตาราง การที่เราจะต้องสั่งค้นข้อมูล Title และ Description มาอีกรอบ ซึ่งในบางสถานการณ์ ไม่ได้มีเพียงแค่ 2 ค่านี้เท่านั้น อาจจะมีความซับซ้อนมากกว่านั้น ซึ่งทำให้ยิ่งเสียเวลามากขึ้นไปอีก จึงมีคำถามว่า เราจะประมวลผลต่อไปเลยโดยเอาข้อมูลที่เคยค้นมาแล้วมาใช้ ไม่ต้องค้นข้อมูลซ้ำได้อย่างไร?
เมื่อพิจารณาข้อจำกัดคือ ค่า value ของ input นั้น เป็นข้อความใดๆ ซึ่งปกติแล้ว เราก็มักจะใส่ค่าเดี่ยวๆ เช่น "1234" "12.34" "true" เป็นต้น แต่ถ้าเราจะส่งค่าเป็น object มีโครงสร้างที่ซับซ้อน เช่น object ที่มีค่า id, title และ description ดังตัวอย่างนี้ล่ะ จะทำอย่างไรดี?
ผมจึงเลือกใช้ eval() ซึ่งคำสั่งนี้ จะสามารถประมวลผลข้อความที่เขียนเป็นประโยคได้ เช่น eval("12+34"); จะได้ 46 เป็นต้น หากเราเขียนข้อความเป็นโครงสร้างของ object ก็จะสามารถสร้าง object ขึ้นมาได้ เช่น
var obj = eval("({id:'1234',title:'Item 0',description:'This is the first item.'})");
alert("Object:\nID = "+obj.id+"\nTitle = "+obj.title+"\nDescription = "+obj.description);
หมายเหตุ: ข้อความที่จะใช้สร้างเป็น object นั้น จะต้องมีเครื่องหมายวงเล็บ () ครอบ {} อีกชั้นหนึ่ง
ดังนั้น ตารางรายการที่เราสร้างให้ผู้ใช้เลือก ก็จะต้องเตรียมค่า value เป็นแบบโครงสร้างแทนที่จะเป็นเพียงแค่รหัสของรายการข้อมูลนั้นดังนี้
<form><table>
<tr><td>Check</td><td>Title</td><td>Description</td></tr>
<tr><td><input type="checkbox" name="item0" value="({id:'1234',title:'Item 0',description:'This is the first item.'})"></td><td>Item 0</td><td>This is the first item.</td></tr>
...
</table></form>
จากนั้น เราก็สามารถดัก onsubmit แล้วแปลงค่าใน value มาเป็น object แล้ว submit ไปด้วย Ajax หรือ jQuery ก็แล้วแต่สะดวกนะครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น