GridView行的显示和编辑状态

最新推荐文章于 2025-11-12 15:31:26 发布

原创最新推荐文章于 2025-11-12 15:31:26 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#textbox #asp #server #delete #object

开发心得专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在GridView中实现数据显示与编辑状态的切换。使用TemplateField创建两种模板，ItemTemplate用于显示数据，EditItemTemplate则在编辑时将Label转换为TextBox。通过设置不同的模板，实现了在查看和编辑模式下不同列的展示效果，用户可以进行数据的更新、取消和删除操作。

显示数据时不能编辑,可用Label标签，编辑时变为TextBox。关键是在TemplateField里面加入二块子模板<ItemTemplate>

和<EditItemTemplate>

<EditItemTemplate>就是GRIDVIEW处在编辑状态下时该列的状态。

前台代码

<asp:GridView ID="gridview1" runat="server" AutoGenerateColumns="False" DataKeyNames="BM" OnRowDataBound="gridview1_RowDataBound" OnRowEditing="gridview1_RowEditing" BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4" OnRowUpdating="gridview1_RowUpdating" Width="100%" OnRowCancelingEdit="gridview1_RowCancelingEdit" OnRowDeleting="gridview1_RowDeleting">
            <Columns>
                <asp:TemplateField HeaderText="缓冲罐名称" ShowHeader="true">
                    <ItemTemplate>
                        <asp:Label ID="tDGM" runat="server" Text='<%#Eval("DGM")%>' Width="100%"></asp:Label>
                    </ItemTemplate>
                    <ControlStyle Width="50px" />
                </asp:TemplateField>

                <asp:TemplateField HeaderText="高度(m)" ShowHeader="true">
                    <ItemTemplate>
                        <asp:Label ID="tGD" runat="server" Text='<%#Eval("GD")%>' Width="100%"></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="tGD" runat="server" Text='<%#Eval("GD")%>' Width="100%"></asp:TextBox>
                    </EditItemTemplate>
                    <ControlStyle Width="30px" />
                </asp:TemplateField>

                <asp:TemplateField HeaderText="直径(m)" ShowHeader="true">
                    <ItemTemplate>
                        <asp:Label ID="tZJ" runat="server" Text='<%#Eval("ZJ")%>' Width="100%"></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="tZJ" runat="server" Text='<%#Eval("ZJ")%>' Width="100%"></asp:TextBox>
                    </EditItemTemplate>
                    <ControlStyle Width="30px" />
                </asp:TemplateField>

                <asp:TemplateField HeaderText="液位上限(m)" ShowHeader="true">
                    <ItemTemplate>
                        <asp:Label ID="tYWSX" runat="server" Text='<%#Eval("YWSX")%>' Width="100%"></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="tYWSX" runat="server" Text='<%#Eval("YWSX")%>' Width="100%"></asp:TextBox>
                    </EditItemTemplate>
                    <ControlStyle Width="30px" />
                </asp:TemplateField>

                <asp:TemplateField HeaderText="液位下限(m)" ShowHeader="true">
                    <ItemTemplate>
                        <asp:Label ID="tYWXX" runat="server" Text='<%#Eval("YWXX")%>' Width="100%"></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="tYWXX" runat="server" Text='<%#Eval("YWXX")%>' Width="100%"></asp:TextBox>
                    </EditItemTemplate>
                    <ControlStyle Width="30px" />
                </asp:TemplateField>

                <asp:TemplateField HeaderText="在用" ShowHeader="true">
                    <EditItemTemplate>
                        <asp:DropDownList ID="dzy" runat="server">
                        </asp:DropDownList>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lzy" runat="server" Text='<%#(Eval("ZY"))%>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="操作" ShowHeader="true">
                        <EditItemTemplate>
                            <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update"
                                 Text="更新"></asp:LinkButton>
                            <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel"
                                Text="取消"></asp:LinkButton>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit"
                                Text="编辑" OnClientClick="return confirm(确认要编辑吗？);"></asp:LinkButton>

                            <asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="False" CommandName="Delete"
                                Text="删除" OnClientClick="return confirm(确认要删除吗？);"></asp:LinkButton>
                            <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Select"
                                Text="选择"></asp:LinkButton>
                        </ItemTemplate>
                </asp:TemplateField>

            </Columns>
            <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
            <RowStyle BackColor="White" ForeColor="#003399" />
            <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
            <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
            <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />
        </asp:GridView>

后台代码

    protected void gridview1_RowEditing(object sender, GridViewEditEventArgs e)
    {
        gridview1.EditIndex = e.NewEditIndex;
        //当前编辑行背景色高亮
        this.gridview1.EditRowStyle.BackColor = System.Drawing.Color.CadetBlue;
        DataBind1(bm);
    }

效果图