เกริ่นนำ …
ในบทความนี้ ผมจะเอา row หรือ cell ออกจาก GridView เมื่อ mouseclick ผมจะประยุกต์ใช้ animation effect ง่ายๆไปยัง row หรือ cell ที่ต้องการก่อนเอามันออกด้วย จะเห็นว่าผมได้จัดการสิ่งต่างๆบนฝั่ง client เท่านั้น ดังนั้นข้อมูลที่แสดงใน GridView จากฝั่ง server จะไม่ถูก refresh
เริ่มต้นสร้าง GridView Control …
1. ให้ดูที่บทความนี้ ASP.NET กับ jQuery: การทำงานกับ GridView Control เริ่มต้น เพื่อสร้าง GridView พร้อม รายการข้อมูลตัวอย่าง หรือ download base SourceCode มาทำต่อเลยก็ได้ครับ
2. เพิ่ม class highlight สำหรับ update สี background ของ row หรือ cell ที่ต้องการ
<style media=”screen” type=”text/css”>.highlight{background-color:#9999FF;}</style>
ใส่กลไก jQuery remove row …
1. ใน script block jQuery function ของ document.ready() กำหนด click event บนทุกๆ rows ของ GridView control โดยไม่รวม header row ดังนี้
$(“#<%=GridView1.ClientID%> tr”).filter(“:not(:has(table, th))”).click(function() {
2. highlight ไปยัง row นี้
$(this).addClass(“highlight”);
3. ประยุกต์ใช้ fadeOut animation effect โดยตั้ง timeout เท่ากับ 1000 ms และทำการ remove row ออกจาก GridView ใน callback function ของ fadeOut
$(this).fadeOut(1000, function() {
$(this).remove();
});
});
สรุปกลไก jQuery ที่เพิ่มเข้าไปทั้งหมด ดังนี้
<script language=”javascript” type=”text/javascript”>
$(document).ready(function() {
$(“#<%=GridView1.ClientID%> tr”).filter(“:not(:has(table, th))”).click(function() {
$(this).addClass(“highlight”);
$(this).fadeOut(1000, function() {
$(this).remove();
});
});
});
</script>
ทดสอบ remove row …
พอ click ไปที่ cell ใดๆ row มันจะค่อยๆหาย ก่อนที่จะถูกเอาออกไปจาก GridView ตามภาพนี้
ใส่กลไก jQuery remove cell …
กลับไปแก้ที่ selector จาก tr เป็น td และเอาการ filter ไม่ใช่ th ออก ดังนี้
$(“#<%=GridView1.ClientID%> td”).click(function() {
$(this).addClass(“highlight”);
$(this).fadeOut(1000, function() {
$(this).remove();
});
});
เมื่อทดสอบโดยการ click ไปที่ cell ใดๆ ก็จะค่อยๆหายไปก่อนที่จะถูกเอาออกจาก GridView เพราะนั่นคือ fadeOut animation effect ที่ผมใส่ไว้นั่นเองครับ
download this SourceCode
ขอบคุณครับ 🙂
ไม่ต้องพึ่งโชคก็ได้ แต่ให้เพิ่ม “ความน่าจะเป็น ของความสำเร็จ”
Increase the Probability of Success
— กฏที่ 33 ของ บัณทิต อึ้งรังษี —
