ASP.NET กับ jQuery: เอา row/cell บนการ click ออกจาก GridView

เกริ่นนำ …

ในบทความนี้ ผมจะเอา 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 ของ บัณทิต อึ้งรังษี —

Advertisements

#asp-net, #javascript, #jquery