【玩转GridView】之让GridView动起来(一)

今天药忘吃喽~ 2022-08-04 13:55 226阅读 0赞

**概述：**

这次，小编带大家看看如何让你的gridview动起来.整个功能大概流程是;当点击左侧gridview中某一行，查询相应的12月数据显示到右侧gridview中，对于没有数据的，显示默认数据。之后可对右侧gridview数据进行编辑，再保存。

如下图：就是右侧gridview，也是这篇博客的主角.

![Center][]

说明：这里直接用文本框代替了那些需要编辑数据的列。当前两列金额数发生变化时，对应的总额会自动更新。根据实际需求，复制按钮可将12列数据同时填充。方便用户进行相同数据的输入操作。

接下来看看，界面是如何拼出来的.

**前台代码：**

<asp:AdvGridView ID="grvDetail" runat="server" CssClass="QueryList" ShowHeaderWhenEmpty="true" 
          OnRowDataBound="grvDetail_RowDataBound" OnRowUpdating="grvDetail_RowUpdating"
          OnRowCommand="grvDetail_RowCommand" HeaderStyle-CssClass="QueryTop" Width="99%">
        <Columns>
            <asp:BoundField DataField="SYearMonth" ItemStyle-Width="70" HeaderText="**" SortExpression="t.S_YEAR_MONTH"/>
            <asp:TemplateField HeaderText="**" ItemStyle-CssClass="tcTdLeftWrap" HeaderStyle-CssClass="TdLeft" SortExpression="t.N_FEE_QUOTA">
               <ItemTemplate>
                 <asp:TextBox ID="feeQuota" runat="server" CssClass="numTxt" MaxLength="12" Width="100px"
                       Text='<%# Bind("NFeeQuota") %>'></asp:TextBox>
                 <asp:LinkButton ID="lblCopy" Text="复制" runat="server" Width="35px" CausesValidation="False"
                       CommandName="LoadData" Visible="false"></asp:LinkButton>
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="**" ItemStyle-CssClass="tcTdLeftWrap" HeaderStyle-CssClass="TdLeft">
               <ItemTemplate>
                  <asp:TextBox ID="adjQuota" runat="server" CssClass="numTxt" MaxLength="12" Width="100px"
                       Text='<%# Bind("NAdjQuota") %>'></asp:TextBox>
               </ItemTemplate>
          </asp:TemplateField>
         <asp:TemplateField HeaderText="**" ItemStyle-CssClass="tcTdLeftWrap" HeaderStyle-CssClass="TdLeft">
              <ItemTemplate>
                  <asp:TextBox ID="adjComment" runat="server" CssClass="numTxt" MaxLength="12" Width="200px"
                        Text='<%# Bind("SAdjComment") %>'></asp:TextBox>
              </ItemTemplate>
         </asp:TemplateField>
         <asp:BoundField runat="server" DataField="NCost" ItemStyle-Width="70" HeaderText="**" />
         <asp:TemplateField HeaderText="**" ItemStyle-CssClass="tcTdLeftWrap" HeaderStyle-CssClass="TdLeft">
             <ItemTemplate>
                 <asp:AdvDropDownList ID="level" runat="server" Height="16px" Width="100" Text='<%# Bind("SLevel") %>'>
                       <asp:ListItem Text="**" Value="0"></asp:ListItem>
                       <asp:ListItem Text="**" Value="1"></asp:ListItem>
                       <asp:ListItem Text="**" Value="2"></asp:ListItem>
                 </asp:AdvDropDownList>
                 <asp:LinkButton ID="lbCopy" runat="server" Width="35px" Text="复制" CausesValidation="False"
                       CommandName="Load" Visible="false"></asp:LinkButton>
                 <asp:HiddenField ID="FqID" runat="server" Value='<%#Eval("SFqId") %>'></asp:HiddenField>
             </ItemTemplate>
         </asp:TemplateField>
       </Columns>
    </asp:AdvGridView>

**说明:**

1**.**上述代码中，主要用到了[上篇博客][Link 1]所述的TemplateField模板.在模板中嵌入需要的文本框和LinkButton，下拉框等，来完成相关编辑操作.

2.将查询结果用以下语句绑定在模板中的文本框上，就使得查询结果直接在文本框中显示了.

Text='<%# Bind("SAdjComment") %>'>

再看看，嵌入Griview中的"复制"按钮是如何在后台完成复制操作的.

**后台代码：**

#region 设置"复制"按钮只在第一行显示
        /// <summary>
        /// gridview行绑定事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void grvDetail_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowIndex == 0)
            {
                LinkButton btCopy = (LinkButton)e.Row.FindControl("lblCopy");
                btCopy.Visible = true;
                btCopy.CommandName = "Load";
                LinkButton btnCopy = (LinkButton)e.Row.FindControl("lbCopy");
                btnCopy.Visible = true;
                btnCopy.CommandName = "LoadData";
            }
        }
        #endregion
    
        #region "复制"按钮事件
        /// <summary>
        /// gridview行命令事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void grvDetail_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            if (e.CommandName == "Load")
            {
                #region 获取第一行文本框的金额数
                TextBox FeeQuota = (TextBox)grvDetail.Rows[0].FindControl("feeQuota");
                string fee = FeeQuota.Text.Replace(" ", "").Trim();
    
                for (int i = 0; i < grvDetail.Rows.Count; i++)
                {
                    //将第一行获得的金额数复制到12个月中
                    TextBox txtFee = (TextBox)grvDetail.Rows[i].FindControl("feeQuota");
                    txtFee.Text = fee;
    
                    TextBox txtAll = (TextBox)grvDetail.Rows[i].FindControl("adjQuota");
                    String allFee=txtAll.Text;
                    grvDetail.Rows[i].Cells[4].Text = Convert.ToString(Convert.ToDouble(fee) + Convert.ToDouble(allFee));
                }
                #endregion
            }
            if (e.CommandName == "LoadData")
            {
                #region 获取第一行下拉框的值
                DropDownList Level = (DropDownList)grvDetail.Rows[0].FindControl("level");
                string slevel = Level.Text.Replace(" ", "").Trim();
    
                int num = 0;
                num = Level.SelectedIndex;
    
                for (int i = 0; i < grvDetail.Rows.Count; i++)
                {
                    //将一行的下拉框值填充到12个月数据
                    DropDownList ddlLevel = (DropDownList)grvDetail.Rows[i].FindControl("level");
                    ddlLevel.SelectedIndex = num;
                }
                #endregion
            }
        }
        #endregion

**说明:**

上述代码中，使用的方法都是gridview本身所拥有的方法和属性.除此之外，gridview还有好多常用属性(**RowDataBound.RowUpdating.RowEditing.RowDeleting.Sorting**)等，在下篇博客中我们会接触到这些.

**总结：**

这篇博客主要是讲：当需要在gridview 中直接对数据进行操作，可用TemplateField模板和gridview的属性进行结合，来达到所需要的效果.

这种方式是最初做的时候，自己的一个思路和实现方式.在之后的项目过程中，发现了一种更加方便用户，界面友好的方式来实现同样效果.  
下篇博客，继续这个话题~~

[Center]: /images/20220731/f62315e4cef1479789e4353687da5e73.png
[Link 1]: http://blog.csdn.net/u010542940/article/details/48085149