ASP.NET กับ jQuery: เอาค่า content ใน cell บน GridView เมื่อ click

เกริ่นนำ

สวัสสดีครับ บทความนี้ก็เป็นบทความสุดท้าย ที่เกี่ยวกับ ASP.NET  GridView กับ jQuery แล้วครับ ก็จะนำเสนอวิธีดึงข้อมูล(content)มาจาก cell ใน gridview ตอน click ที่ cell ครับ

ผลลัพย์ที่เสร็จแล้ว

เหตุผลที่มา

1. download GridView เพื่อมาเติมกลไกต่อจาก SourceCode

2. ใส่ CSS highlight เมื่อ click บน cell และ เปลี่ยน cursor ของ mouse ตอนชี้ที่ cell

.highlight
{
background-color:#9999FF;
}
td { cursor:pointer;}

3. เพิ่ม div message เพื่อแสดงข้อมูลของ cell บน form

<div id=”message”></div>

4. ใส่กลไก jQuery ใน code javascript block ไปตามขั้นตอน ดังนี้

4.1 เริ่มต้นใช้ jQuery selector row(tr)  ของ GridView  แล้วใช้ function filter ใส่ query string เพื่อไม่เอา row ที่เป็น header และ bind function กับ event click

$(“#<%=GridView1.ClientID%> tr”).filter(“:not(:has(table, th))”).click(function (e) {

4.2 ค้นหา cell  เป้าหมายที่ถูก click อยู่

var $cell = $(e.target).closest(“td”);

4.3 เอา highlight ออกทุกๆ cell ใน GridView แล้วกำหนดให้ cell ที่ได้จาก 4.2

$(“#<%=GridView1.ClientID%> td”).removeClass(“highlight”);
$cell.addClass(“highlight”);

4.4 แสดงข้อความของ cell ที่ message ก็เป็นอันจบ function ของ event click

$(“#message”).text(‘คุณได้เลือก: ‘ + $cell.text());
});

สรุป code กลไกที่เสร็จสมบูรณ์แล้ว ได้แบบนี้

<script src=”js/jquery-1.6.1.min.js” type=”text/javascript”></script>
<script language=”javascript” type=”text/javascript”>
$(function () {
$(“#<%=GridView1.ClientID%> tr”).filter(“:not(:has(table, th))”).click(function (e) {
var $cell = $(e.target).closest(“td”);
$(“#<%=GridView1.ClientID%> td”).removeClass(“highlight”);
$cell.addClass(“highlight”);
$(“#message”).text(‘คุณได้เลือก: ‘ + $cell.text());
});
});
</script>

ขอบคุณครับ 🙂

Advertisements

#asp-net, #javascript, #jquery