ASP.NET กับ jQuery: เอา column ออกโดยการ click ไปที่ header ของ GridView

เกริ่นนำ …

บนความนี้ผมจะแสดงการเอา column ออกทั้ง column เมื่อ click บน header ของ GridView ดูเหมือนจะง่ายๆนะครับ ลองทำตามผมดูแล้วจะรู้ว่าไม่ง่ายอย่างที่คิด

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

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

2. เพิ่ม class style สำหรับแสดง cusor เมื่อชี้ที่ header GridView

<style media=”screen” type=”text/css”>th { cursor:pointer;}</style>

ใส่กลไก jQuery remove row …

1. ใน script block jQuery function ของ document.ready()  กำหนด click event บน header ของ GridView

$(“#<%=GridView1.ClientID %> th”).click(function() {

2. นับจำนวน index ที่มีลำดับเดัยวกับ column เมื่อมีการ click บน web โดยผู้ใช้

var count = $(this).closest(“th”).prevAll(“th”).length;

3. กำหนด function  callback บนแต่ละ row ของ GridView

$(this).parents(“#<%=GridView1.ClientID %>”).find(“tr”).each(function() {

4. เอา cell ออกจาก GridView โดยขึ้นอยู่จำนวน index ของ column ใน callback ของ event click

$(this).find(“td:eq(” + count + “)”).remove();

5. เอา header ออกจาก GridView โดยขึ้นอยู่จำนวน index ของ column ใน callback ของ event click

$(this).find(“th:eq(” + count + “)”).remove();
});
});

สรุปกลไก jQuery ที่เพิ่มเข้าไปทั้งหมด ดังนี้

<script type=”text/javascript”>
$(document).ready(function() {
$(“#<%=GridView1.ClientID %> th”).click(function() {
var count = $(this).closest(“th”).prevAll(“th”).length;
$(this).parents(“#<%=GridView1.ClientID %>”).find(“tr”).each(function() {
$(this).find(“td:eq(” + count + “)”).remove();
$(this).find(“th:eq(” + count + “)”).remove();
});
});
});
</script>

ทดสอบ remove column …

เมื่อคุณ click ไปที่ header บน GridView column จะถูกเอาออก ตามภาพ

download this SourceCode

ขอบคุณครับ 🙂

Advertisements

#asp-net, #javascript, #jquery