ASP.NET กับ jQuery: เมื่อเอา mouse ชี้ไปที่ row/cell บน GridView แล้วให้แสดงแถบสี(highligh)

เกริ่นนำ …

บทความนี้ผมจะนำเสนอการ highligh สีที่ row บน GridView เมื่อเอา mouse ไปชี้ หรือ mouse hover ครับ

เริ่มต้นสร้าง GridView control เพื่อแสดงรายการข้อมูล

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

2. เพิ่ม CSS นี้ลงไปที่ form เพื่อกำหนด สีของ highligh ที่ row/cel และกำหนด ตัว mouse cursor เมื่อชี้ที่ row/cell บน GridView ให้เปลี่ยน icon เป็นตัว pointer(มันจะเป็นรูปนิ้วชี้)

<style media=”screen” type=”text/css”>.highlight{background-color:#9999FF;} td { cursor:pointer;}</style>

ใส่กลไก jQuery highligh row …

1. ใน document.ready()  function ของ jQuery script block กำหนด  hover event ให้แต่ละ GridView row

$(“#<%=GridView1.ClientID%> tr”).hover(

2. กำหนด handler สำหรับ mouseenter event

function() {$(this).addClass(“highlight”);} ,

3. กำหนด handler สำหรับ mouseleave event

function() {$(this).removeClass(“highlight”);}

);

เมื่อใส่ script จนเสร็จแล้วจะได้

<script language=”javascript” type=”text/javascript”>
$(document).ready(function() {
$(“#<%=GridView1.ClientID%> tr”).hover(
function() {
$(this).addClass(“highlight”);
},
function() {
$(this).removeClass(“highlight”);
});
});
</script>

ทดสอบ highligh row …

พอ run form ขึ้นมาแล้วเอา mouse ไปชี้ที่ grid ก็จะแสดง form แบบนี้

ใส่กลไก jQuery highligh cell …

กลับไปแก้ไข การกำหนด  hover event ให้จาก row ให้เป็น cell แทนแบบนี้ $(“#<%=GridView1.ClientID%> td”) ดังนั้นจะได้ script ที่สมบูรณ์เป็น

<script language=”javascript” type=”text/javascript”>
$(document).ready(function() {
$(“#<%=GridView1.ClientID%> td”).hover(
function() {
$(this).addClass(“highlight”);
},
function() {
$(this).removeClass(“highlight”);
});
});
</script>

ทดสอบ highligh cell …

พอ run form ขึ้นมาแล้วเอา mouse ไปชี้ที่ grid cell ใดๆก็จะแสดง form แบบนี้

เป็นไงครับง่ายมากเลยใช่มั้ย

download SourceCode

ขอบคุณครับ 🙂

อยู่แบบ Local Class  ทำงานแบบ World Class

— Chav:P —

Advertisements

#asp-net, #javascript, #jquery