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>