1. 程式人生 > >【玩轉GridView】之TemplateField模板

【玩轉GridView】之TemplateField模板

背景介紹:

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

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

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

 TemplateField類的部分常用屬性:

              

   介紹:如果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>

 如上篇部落格所述,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.