jQuery อ้างถึง Control ใน gridview

วันก่อนเข้าไป http://www.blogger.com/www.greatfriends.biz พบคำถามนี้ในบอร์ดพอดีครับ เป็นคำถามที่น่าสนใจทีเดียว ผมตอบไว้แบบนี้ครับ
ผมสมมติว่า เมื่อผมคลิ๊กที่ column ของ gridview ผมจะให้โปรแกรม alert ค่าทั้งหมดของแถวที่คลิ๊ก และแสดงค่าของ column ที่คลิ๊ก
เนื่องจากผมใช้ MSAjax และเอา Gridview ไปใส่ใน UpdatePanel ดังนั้น แทนที่ผมจะใช้ $(document).ready(function(){}); ผมจะไป register click event ที่ gvDBItem_DataBound แทนครับ

และก็ใน click(function(){}); แทนที่ผมจะเขียนโค้ดไปโดยตรง ผมเปลี่ยนให้ไปเรียก function ใช้งานแทน เพื่อที่ว่าตอน debug จะได้ง่ายครับ

โค้ดส่วน Code Behind

Protected Sub gvDBItem_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) Handles gvDBItem.DataBound

Dim sbScript As New Text.StringBuilder

    sbScript.Append("$('#" & gvDBItem.ClientID & " tr').click(function(e){gv_RowClick(this,e);});")

    ScriptManager.RegisterStartupScript(Page, Page.GetType, "GVDataBound", sbScript.ToString, True)

End Sub

 

โค้ดส่วน javascript

<script type="text/javascript" >

    function gv_RowClick(sender, e) {

        alert(sender.innerText);

        alert(e.srcElement.innerHTML);

    }

</script>

 

ในตัวอย่างผมใช้ gridview id กับ tr เป็น selector แต่ว่าถ้าเราต้องการรู้ ID ของแถวที่กด หรือต้องการเอาค่าใน column ที่ต้องการเท่านั้น ก็สามารถเปลี่ยน selector ได้ครับ

อีกวิธีที่เพิ่งนึกออก คือเราสามารถใช้ attribute เป็น selector ได้ ดังนั้นเราก็เพิ่ม custom attribute ให้ column ที่เราต้องการเช่น

<asp:TemplateField HeaderText="Item No">

     <ItemTemplate>

          <asp:Label id="lblItemNo" runat="server" RowIndex="true" Text='<%# Eval("ORDERNO") %>' ></asp:Label>

     </ItemTemplate>

</asp:TemplateField>

แล้วใน jQuery เราก็กำหนด selector

<script type="text/javascript" >

     $(document).ready(function() {

     $("#gvDBItem [RowIndex='true']").click(function(e) { gv_RowIndexClick(this, e); });

});

     function gv_RowClick(sender, e) {

          alert(sender.innerText);

          alert(e.srcElement.innerHTML);

     }

</script>

อันนี้เป็นตัวอย่างแบบไม่ได้ใช้ UpdatePanel ครับ ผมเลยใช้ $(document).ready()

ลองอ่านกระทู้เต็มๆได้ที่นี่ครับ
jQuery อ้างถึง Control ใน GridView อย่างไรครับ
http://greatfriends.biz/?109412