Question

我正在使用带有模板字段的gridview控件，如下面的代码所示。用户更新gridview控件中的值;我的要求是当用户点击该单元格时清除单元格的内容。换句话说，当用户点击一个单元格时，该单元格应该清除自己，用户应该能够输入一个值。如果用户在单击单元格后没有输入值并单击其他位置，则需要将原始值返回到单元格中。

我做了很多研究，发现在这里发表的帖子建议使用Java Script;我试过（它在下面的代码中显示为粗体）但它不起作用。对我做错了什么的任何想法？提前谢谢。

<asp:TemplateField HeaderText="Q1" SortExpression="CYQ1">
            <EditItemTemplate>
              <asp:TextBox ID="CYTextBox" runat="server" Text='<%# Bind("CYQ1") %>' Width="50"></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
              <asp:TextBox ID="CYQ1TextBox" runat="server" MaxLength="20" Width="50" 
                Text = '<%# Bind("CYQ1","{0:0.##}") %>' Font-Names="Tahoma" Font-Size="8pt"> 

                    **<script type="text/javascript">
                        var txtsearch = document.getElementById("CYQ1TextBox");
                        txtsearch.onfocus = function () {
                            if (this.value == "Group Name..") {
                                this.value = "";
                            }
                        };

                        txtsearch.onblur = function () {
                            if (this.value.length == 0) {
                                this.value = "Group Name...";
                            }
                        }
                    </script>**      

              </asp:TextBox>
            </ItemTemplate>        
              <HeaderStyle Width="40px" Font-Names="Tahoma" Font-Size="8pt"/>
          </asp:TemplateField>

Answer 1

尝试使用jQuery

<asp:GridView ID="Grid1" runat="server" AutoGenerateColumns="false">
    <Columns>
<asp:TemplateField HeaderText="Q1" SortExpression="CYQ1" ItemStyle-CssClass="ValueCell">
            <ItemTemplate >
              <asp:Label ID="CYQ1Label" runat="server" MaxLength="20" Width="50" 
                Text='<%# Bind("CYQ1","{0:0.##}") %>' />
              <asp:TextBox ID="CYQ1TextBox" runat="server" MaxLength="20" Width="50" 
               Text='<%# Bind("CYQ1","{0:0.##}") %>' style="display:none" /> 
            </ItemTemplate>        
          </asp:TemplateField>
</Columns>
</asp:GridView>

注意：

每个单元格的CSSclass。
使用display：none
无编辑模板

每页只应包含一次jQuery，并且在任何jQuery代码

之前

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
    jQuery(document).ready(function ($) {
        $('td.ValueCell span').click(function () {
            var span = $(this);
            span.hide();
            var box = span.siblings('input:text');
            box.val(span.text());
            box.show();
        });

        $('td.ValueCell input:text').blur(function () {
            var box = $(this);
            box.hide();
            var span = box.siblings('span');

            if (box.val() == '') {
                box.val(span.text());
            }else {
                span.text(box.val());
            };
            span.show();
        });
    });
</script>

在代码背后，您可以通过某些按钮点击事件

从文本框中读取值

protected void Button1_Click(object sender, EventArgs e)
{
    foreach (GridViewRow row in Grid1.Rows)
    {
        // Textbox will presist values entered by user (label will not)  
        var box = (TextBox)row.FindControl("CYQ1TextBox");


    }
}

单击单元格时，在gridview模板字段中清除单元格值

1 个答案: