【玩转GridView】之TemplateField模板

谁践踏了优雅 2022-08-04 13:36 422阅读 0赞

**背景介绍：**

近期负责开发的子系统中，很大一部分的工作都是和GridView打交道，各种编辑、删除gridview的操作，所以小编准备系列总结，来进一步学习。

在介绍详情之前，让小编带大家了解几个重要角色。

# 1.[**TemplateField**][TemplateField] #

介绍：在gridview 中单个字段都会采用**BoundField**去直接绑定字段。但是如果想要添加控件，就可采用**TemplateField**模板。

如下代码可看出，[模板和BoundField的不同之处][BoundField]了。

TemplateField类的部分常用属性：

![Center][] ![Image 1][]

## 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][] ##

如[上篇博客][Link 1]所述,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,效果展示 ##

![Center 1][]

下图显示的是可编辑的效果图：

![Center 2][]

## 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.

[TemplateField]: https://msdn.microsoft.com/zh-cn/library/system.web.ui.webcontrols.templatefield.aspx
[BoundField]: http://blog.sina.com.cn/s/blog_ae7b7256010189cs.html
[Center]: https://img-blog.csdn.net/20150831190615733?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Image 1]: 
[EditItemTemplate]: https://msdn.microsoft.com/zh-cn/library/system.web.ui.webcontrols.templatefield.edititemtemplate%28v=VS.80%29.aspx
[ItemTemplate]: https://msdn.microsoft.com/zh-cn/library/system.web.ui.webcontrols.templatefield.itemtemplate.aspx
[Link 1]: http://blog.csdn.net/u010542940/article/details/47865229
[Center 1]: /images/20220731/848f4817db4c4333acc7f4e522324ab6.png
[Center 2]: /images/20220731/0c38654ef5b84a1f9d423e925aa80b99.png