ขอคำแนะนำเรื่อง GridView กับ Jquey จ้า
http://greatfriends.biz?110946
เจ้าของกระทู้ต้องการทำ Highlight สีของแถวใน GridView เมื่อเอา mouse ไปชี้ที่แถวนั้นๆครับ และพอกด Select ใน GridView ก็ให้นำข้อมูลมาใส่ textbox
จริงๆแล้วถ้าข้อมูลที่จะใส่ TextBox อยู่ใน GridView ทั้งหมด เราสามารถใช้ jQuery ดึงข้อมูลของแถวมาใช้ได้เลย แต่ผมสมมติว่าเราต้องการข้อมูลอื่นๆ โดยอ้างจาก Id ของข้อมูลที่เลือกละกันครับ ดังนั้นผมก็ต้อง Post back กลับไปเพื่อหาค่ามาใส่ใน textbox ก็เลยทำหน้า page มาลองทดสอบดูครับ
โค้ดส่วน Head ครับ Style ผม copy มาจากเจ้าของกระทู้เลย ส่วน jQuery ผมใช้ที่อาจารย์สุเทพแก้ไขให้ นำมาแยกออกจาก $document.ready() เป็น LoadHandle function ครับ
<head runat="server">
<title>Test</title>
<style>
.trMouseClick {
background-color: Transparent;
color: #A4D1A1 !important;
text-decoration: none;
}
.trMouseOver {
background-color: #F2FEF2 !important;
color: #A4D1A1 !important;
text-decoration: none;
}
.trMouseOver a {
background-color: #F2FEF2 !important;
color: #A4D1A1 !important;
}
</style>
<script type="text/javascript" src="../Scripts/jquery-1.3.2-vsdoc.js"></script>
<script type="text/jscript">
$(document).ready(LoadHandle);
function LoadHandle() {
$("tr:gt{0}").hover(function() {
$(this).addClass("trMouseOver");
}, function() {
$(this).removeClass("trMouseOver");
});
$("tr:gt{0}").click(function() {
$(this).addClass("trMouseClick").siblings().removeClass("trMouseClick");
});
}
</script>
</head>
โค้ดส่วน Form tag (ใน Body)
<asp:ScriptManager ID="ScriptManager1" runat="server">:
</asp:ScriptManager>:
<div id = "main" style="height:700px;z-index:-10">:
<div id="text" style="position:absolute">:
<asp:UpdatePanel ID ="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="Block">:
<ContentTemplate>:
<div id="Update" style="position:absolute;top:50px; width:700px">:
<asp:GridView ID="gvInvoice" runat="server" AllowPaging="True"
AutoGenerateColumns="False" BorderColor="Gainsboro" BorderStyle="None"
BorderWidth="1px" CellPadding="0" GridLines="Horizontal"
AutoGenerateSelectButton="True" DataKeyNames="ItemId">:
<Columns>:
<asp:TemplateField SortExpression="ITEMID">:
<ItemStyle Width="0px">:</ItemStyle>:
<ItemTemplate>:
<asp:HiddenField id="hdnRecId" runat="server" Value='<%# Bind("ITEMID") %>:'>:</asp:HiddenField>:
</ItemTemplate>:
</asp:TemplateField>:
<asp:TemplateField HeaderText="Item No">:
<HeaderStyle Width="40px" HorizontalAlign="center">:</HeaderStyle>:
<ItemStyle HorizontalAlign="center" />:
<ItemTemplate>:
<asp:Label id="lblItemNo" runat="server" Text='<%# Eval("ORDERNO") %>:' >:</asp:Label>:
</ItemTemplate>:
</asp:TemplateField>:
<asp:TemplateField HeaderText="Invoice Date">:
<ItemStyle Width="100px">:</ItemStyle>:
<HeaderStyle HorizontalAlign="Center">:</HeaderStyle>:
<ItemTemplate>:
<asp:Label style="TEXT-ALIGN: center" id="Label2" runat="server" Width="80px" Text='<%# Bind("InvoiceDate", "{0:dd/MM/yyyy}") %>:'>:</asp:Label>:
</ItemTemplate>:
</asp:TemplateField>:
<asp:TemplateField HeaderText="Product Code">:
<ItemStyle Width="60px">:</ItemStyle>:
<HeaderStyle HorizontalAlign="Center">:</HeaderStyle>:
<ItemTemplate>:
<asp:Label style="TEXT-ALIGN: center" id="Label3" runat="server" Width="50px" Text='<%# Bind("ProductCode") %>:'>:</asp:Label>:
</ItemTemplate>:
</asp:TemplateField>:
<asp:TemplateField HeaderText="Amount (THB)">:
<ItemStyle Width="80px">:</ItemStyle>:
<HeaderStyle HorizontalAlign="Center">:</HeaderStyle>:
<ItemTemplate>:
<asp:Label style="TEXT-ALIGN: right" id="Label5" runat="server" Width="70px" Text='<%# Bind("Amount","{0:#,##0.00}") %>:'>:</asp:Label>:
</ItemTemplate>:
</asp:TemplateField>:
<asp:TemplateField ShowHeader="False">:
<ItemStyle Width="40px">:</ItemStyle>:
<ItemTemplate>:
<asp:ImageButton ID="btnEdit" runat="server" CommandName="Select" ImageUrl="~/Images/icon_edit.gif" ToolTip="Edit" />:
</ItemTemplate>:
</asp:TemplateField>:
</Columns>:
<RowStyle >:</RowStyle>:
<SelectedRowStyle>:</SelectedRowStyle>:
<PagerStyle HorizontalAlign="Right" VerticalAlign="Top">:</PagerStyle>:
<HeaderStyle >:</HeaderStyle>:
<AlternatingRowStyle >:</AlternatingRowStyle>:
</asp:GridView>:
</div>:
<div id="dvContent" style="position:absolute;top:400px">:
<asp:TextBox ID="txtId" runat="server" style="width:100px" MaxLength="6">:</asp:TextBox>:
<asp:TextBox ID="txtDescription" runat="server" style="width:250px">:</asp:TextBox>:
<asp:TextBox ID="txtAmount" runat="server" style="width:250px">:</asp:TextBox>:
</div>:
</ContentTemplate>:
</asp:UpdatePanel>:
</div>:
</div>:
โค้ดส่วน Code Behind ครับ
Imports jnithi.Class.Invoice
Partial Class InvoiceTest
Inherits System.Web.UI.Page
#Region "Local fields"
Private _inv As List(Of Entity.Invoice) = Nothing
#End Region
Private Sub GetInvoiceByInvoiceNo()
If _inv IsNot Nothing Then
_inv.Clear()
_inv = Nothing
End If
_inv = Manager.Invoice.GetInvoiceByInvoiceNo("Test1")
Session("Invoice") = _inv
End Sub
Private Sub BindGridView()
gvInvoice.DataSource = _inv
gvInvoice.DataBind()
End Sub
Protected Sub form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles form1.Load
If Not IsPostBack Then
GetInvoiceByInvoiceNo()
Else
_inv = Session("Invoice")
End If
BindGridView()
End Sub
Protected Sub gvInvoice_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles gvInvoice.SelectedIndexChanged
Dim id As Integer = CType(gvInvoice.SelectedValue, Integer)
Dim item As Entity.Invoice = _inv.Find(Function(i) i.ItemID = id)
Me.txtId.Text = id
Me.txtDescription.Text = item.ItemWorkDesc
Me.txtAmount.Text = item.LCCost.ToString("#,##0.00")
ScriptManager.RegisterStartupScript(Page, Page.GetType, "GVDataBound", "LoadHandle();", True)
End Sub
ผลการทดสอบครับ
สรุป
1. ผมแยก LoadHandle Function ออกมาจาก $document.ready() เพื่อที่ว่าให้ function นี้เป็น Event Handler เมื่อทำการ Load ข้อมูลฝั่ง client เสร็จครับ
2. ใน GridView_SelectedIndexChanged ผมทำการ register script เพื่อให้เรียก LoadHandle functionให้ทำงาน เมื่อ UpdatePanel ทำการ Update ข้อมูลเสร็จแล้ว
3. ถ้าไม่ใช้ ScriptManager.RegisterStartupScript ซึ่งเป็นการสั่งที่ฝั่ง Server เราสามารถใช้ PageRequestManager (เขียน javascript) แทนได้ครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น