ASP.NET กับ jQuery: การ drag/drop(ลาก/วาง) บน row ของ GridView

เกริ่นนำ …

บทความนี้ผมจะแสดงการ drag/drop ย้าย row ใน GridView โดยใช้ jQuery plugin ซึ่งทำให้เราสามารถสร้างงานแบบ drag/drop ได้ง่ายมากขึ้นอีกเยอะ

เริ่มต้นสร้าง GridView Control …

1. ให้ดูที่บทความนี้ ASP.NET กับ jQuery: การทำงานกับ GridView Control เริ่มต้น เพื่อสร้าง GridView พร้อม รายการข้อมูลตัวอย่าง หรือ download base SourceCode มาทำต่อเลยก็ได้ครับ

2. ไป download plugin jQuery ทำ drag/drop ได้จากที่ http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/#more-79 หลังจาก load มาเสร็จแล้ว include เข้ามาใน web page

<script src=”js/jquery-1.6.1.min.js” type=”text/javascript”></script>
<script src=”js/jquery.tablednd_0_5.js” type=”text/javascript”></script>

ใส่กลไก jQuery remove row …

1. ใน script block jQuery function ของ document.ready()  ใช้ jQuery selector GridView1 แล้วเรียก function tableDnD()

$(“#<%=GridView1.ClientID %>”).tableDnD();

สรุปกลไก jQuery ที่เสร็จแล้ว

<script language=”javascript” type=”text/javascript”>
$(document).ready(function() {
$(“#<%=GridView1.ClientID %>”).tableDnD();
});
</script>

ทดสอบ  drag/drop …

ทดลอง click mouse ขวาค้างไว้ แล้วเลื่่อนไปยังตำแหน่งที่ต้องการบน grid แล้ว ปล่อย ตามภาพ

เสร็จแล้วครับกับ drag/drop บน row ของ GridView ง่ายมากๆเลยใช่มั้ยครับ

SourceCode

ขอบคุณครับ 😉

Code มันบอกทุกอย่างไว้หมดแล้ว

ทั้ง Design และ Algorithm มีอยู่ใน Code ที่เดียวเท่านั้น

— Chav:P —

Advertisements

#asp-net, #javascript, #jquery