【玩轉GridView】之TemplateField模板

背景介紹:

    近期負責開發的子系統中,很大一部分的工作都是和GridView打交道,各種編輯、刪除gridview的操作,所以小編準備系列總結,來進一步學習。

    在介紹詳情之前,讓小編帶大家瞭解幾個重要角色。

1.TemplateField

   介紹:在gridview 中單個欄位都會採用BoundField去直接繫結欄位。但是如果想要新增控制元件,就可採用TemplateField模板。

   如下程式碼可看出,模板和BoundField的不同之處了。

 TemplateField類的部分常用屬性:

              

2.EditItemTemplate

   介紹:如果TemplateField物件想自定義編輯模式下的顯示內容時,就可使用EditItemTemplate編輯模板。編輯模板可以輸入控制元件,如文字框,下拉框等,方便使用者修改資料。

   如下,就是EditItemTemplate和TemplateField的關係。TextBox的地方可以新增其他控制元件,如下拉框等。

 <asp:TemplateField >
<EditItemTemplate>
<asp:TextBox ID="tbProCode" runat="server" Text='<%# Bind("S_PROJ_CODE") %>' Enabled="false" Width="100px"></asp:TextBox>
</EditItemTemplate>                                                   
</asp:TemplateField>

3.ItemTemplate

 如上篇部落格所述,ItemTemplate中還可以新增隱藏域,去繫結需要值但不要顯示的資料.

   <asp:TemplateField HeaderText="專案編號" SortExpression="t.S_PROJ_CODE">
<ItemTemplate>
<asp:Label ID="LbelProCode" runat="server" Text='<%# Bind("S_PROJ_CODE") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>

4,效果展示

下圖顯示的是可編輯的效果圖:

5.例項程式碼

	<asp:AdvGridView ID="gdvProjectlist" runat="server" AutoGenerateColumns="False" Width="100%" >
<HeaderStyle CssClass="QueryTop" />
<RowStyle CssClass="QueryList" />
<Columns>
<asp:TemplateField HeaderText="完成工作量" SortExpression="t.NActualWorkload">
<EditItemTemplate>
<asp:TextBox ID="tbComplete" runat="server" Text='<%# Bind("N_ACTUAL_WORKLOAD") %>'Width="100px"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lbelComplete" runat="server" Text='<%# Bind("N_ACTUAL_WORKLOAD") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="操作員" SortExpression="t.SUserName">
<EditItemTemplate>
<asp:TextBox ID="tbOper" runat="server" Text='<%# Bind("S_USER_NAME") %>' Width="100px" Enabled="false"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:HiddenField ID="tbWorkID" runat="server" Value='<%#Eval("S_WORDLOAD_ID") %>'> </asp:HiddenField>
<asp:Label ID="lbelOper" runat="server" Text='<%# Bind("S_USER_NAME") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="錄入日期" SortExpression="t.DCreateDate">
<EditItemTemplate>
<asp:TextBox ID="tbPerdatte" Width="100px" runat="server" Text='<%# Bind("D_CREATE_DATE" , "{0:yyyy-MM-dd}") %>' Enabled="false"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lbelPerdate" runat="server" Text='<%# Bind("D_CREATE_DATE", "{0:yyyy-MM-dd}") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="備註" SortExpression="t.SComments">
<EditItemTemplate>
<asp:TextBox ID="tbComment" Width="150px" runat="server" Text='<%# Bind("S_COMMENTS") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lbelComment" runat="server" Text='<%# Bind("S_COMMENTS") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="True" UpdateText="儲存">
<HeaderStyle Width="60px" />
</asp:CommandField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="delete" runat="server" CommandName="Delete">刪除</asp:LinkButton>
</ItemTemplate>
<HeaderStyle Width="60px" />
</asp:TemplateField>
</Columns>
<AlternatingRowStyle BackColor="WhiteSmoke" />
</asp:AdvGridView>

小結:

  這篇部落格,分享了gridview中直接操作表格的一系列操作.這樣操作比彈出框編輯資料的效果更直觀.利用gridview和TemplateField一些方法屬性的結合去實現這種效果.

  下一篇部落格,小編將會總結Gridview一些方法和屬性,來進一步瞭解GridView.