GridView更新某(个)些指定单元格以及在编辑模式下无刷新显示隐藏单元格内某控件

1、正常显示模式下：(需要管理员更新的是订单状态和处理状态)



2、点击编辑进入编辑状态下：



3、处理状态所在列里面是个模板列，包含了一个DropDownList控件，有三个选项：



4、当处理状态选择的是备注的时候，此模板列隐藏的一个TextBox控件会出现，供管理人员填写“未处理”、“已处理”之外的一些订单状态，比如“延迟付款”等。



说明：

一、要修改的列只是模板列，不用修改的列是普通列BoundField，且设置为ReadOnly="true"

二、根据所选择项无刷新显示隐藏订单状态下面的TextBox控件是如何做到的呢？主要是在页面上了加了一段js代码判断所选择的是哪一项，然后决定是否显示TextBox。

主要代码如下：

GridView控件声明：(省略了一些非修改列)

                <Columns>

                    <asp:CommandField HeaderText="编辑" ShowEditButton="true" />
                    <asp:TemplateField HeaderText="订单状态">
                        <EditItemTemplate>

                            <asp:DropDownList ID="ddlOState" runat="server">

                                <asp:ListItem Value="未付款">未付款</asp:ListItem>

                                <asp:ListItem Value="已付款">已付款</asp:ListItem>

                            </asp:DropDownList>

                        </EditItemTemplate>
                        <ItemTemplate>

                          <asp:Label ID="Label1" runat="server" Text='<%# Bind("OState") %>'></asp:Label>

                        </ItemTemplate>

                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="处理状态">
                        <EditItemTemplate>

                            <asp:DropDownList ID="ddlHandled" onchange="ddlChanged()" runat="server">

                                <asp:ListItem Value="未处理">未处理</asp:ListItem>

                                <asp:ListItem Value="已处理">已处理</asp:ListItem>

                                <asp:ListItem Value="备注">备注</asp:ListItem>

                            </asp:DropDownList>

                            <asp:TextBox ID="txtNote" runat="server" style="display:none; width:80px;"></asp:TextBox>

                        </EditItemTemplate>
                        <ItemTemplate>

                          <asp:Label ID="lblHandled" runat="server" Text='<%# Bind("Handled") %>'></asp:Label>

                        </ItemTemplate>

                    </asp:TemplateField>

                </Columns>

注意看
<asp:DropDownList ID="ddlHandled" onchange="ddlChanged()" runat="server">
<asp:TextBox ID="txtNote" runat="server" style="display:none; width:80px;"></asp:TextBox> 

加粗的是重点， onchange="ddlChanged()" ，定义DropDownList选择项改变时响应的JS函数。TextBox初始把它设置为display:none，也就是隐藏。一会就用JS把它显示出来就好了。

DropDownList选择项改变时响应的JS代码如下：

    <script type="text/javascript" language="javascript">

        function ddlChanged()

        {

            var e=event.srcElement;//获取鼠标点击的元素

            var r=e.parentElement.parentElement.rowIndex +1;//获取元素所在的行的行号

                    
            var id = 'GridView1$ctl0' + r + '$txtNote';//获取TextBox的ID

//由于TextBox是在GridView里边的，所以它的ID会变成这样子格式：

//GridView的ID加上控件所在的行号加上TextBox的ID，这是要注意的

            var obj = document.getElementById(id);

            

            var index = e.selectedIndex;
            if(index == 2) //如果选择的是第三项，即备注，则显示TextBox

            {

                obj.style.display = 'block';

                obj.select();

            }

            else //如果选择的是其他项，即备注，则隐藏TextBox

            {

                obj.style.display = 'none';

            }

        }

    </script>