将行添加到可编辑的网格视图后，日期选择器未出现

Posted 2023-05-07

【中文标题】将行添加到可编辑的网格视图后，日期选择器未出现

【英文标题】：Datepicker not appearing after adding rows to editable gridview

【发布时间】：2013-04-20 02:22:21

【问题描述】：

我有一个可编辑的 Gridview，其列如下：

    <asp:TemplateField HeaderText="Date" >
        <ItemTemplate>
            <asp:TextBox ID="TextBox2" runat="server" Width="160" CssClass="DateTimePicker" ></asp:TextBox>
        </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Amt $">
        <ItemTemplate>
             <asp:TextBox ID="TextBox3" runat="server" Width="160"></asp:TextBox>
        </ItemTemplate>
        <FooterStyle HorizontalAlign="Right" />
        <FooterTemplate>
         <asp:Button ID="ButtonAdd" runat="server" Text="Add Stage" onclick="ButtonAdd_Click" />
        </FooterTemplate>
    </asp:TemplateField>
    </Columns>

如您所见，此 gridview 作为底部的按钮，允许用户向 gridview 添加行。

我想为我的日期列弹出一个日历，所以我使用了 jQuery (Keith Wood) 并像这样调用 JS 函数：

    $(function () 

                $('.DateTimePicker').datepick( dateFormat: 'dd MM yyyy' );
            );

在我的网格视图中，当我第一次单击日期文本框（在第一行）时，会弹出日历。但是，一旦我在 gridview 中添加了一行，日历功能就不再出现了。

这是我从代码隐藏向 gridview 添加新行的方式：

    private void AddNewRowToGrid()
    
        int rowIndex = 0;

        if (ViewState["CurrentTable"] != null)
        
            DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
            DataRow drCurrentRow = null;
            if (dtCurrentTable.Rows.Count > 0)
            
                for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
                
                    //extract the TextBox values
                    TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("TextBox1");
                    TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("TextBox2");
                    TextBox box3 = (TextBox)Gridview1.Rows[rowIndex].Cells[3].FindControl("TextBox3");


                    drCurrentRow = dtCurrentTable.NewRow();
                    drCurrentRow["RowNumber"] = i + 1;

                    dtCurrentTable.Rows[i - 1]["Column1"] = box1.Text;
                    dtCurrentTable.Rows[i - 1]["Column2"] = box2.Text;
                    dtCurrentTable.Rows[i - 1]["Column3"] = box3.Text;

                    rowIndex++;
                
                dtCurrentTable.Rows.Add(drCurrentRow);
                ViewState["CurrentTable"] = dtCurrentTable;

                Gridview1.DataSource = dtCurrentTable;
                Gridview1.DataBind();
            
        
        else
        
            Response.Write("ViewState is null");
        

        //Set Previous Data on Postbacks
        SetPreviousData();
    

任何想法为什么在我向网格视图添加新行后我的日历不会弹出？

干杯！

【问题讨论】：

你使用更新面板吗？

【参考方案1】：

只有在使用 UpdatePanel 时才会发生这种情况。

现在，当您使用 UpdatePanel 时，每个 UpdatePanel 上的 Dom 都会发生变化，并且 javascript 需要重新初始化。现在，在您的情况下，您添加了新行，并进行了 ajax 更新，因此您需要重新初始化日期选择器。

这可以通过 UpdatePanel 附带的函数来完成：

<script type="text/javascript"> 
   // when dom is ready we initialize the UpdatePanel requests
   $(document).ready(function () 
       var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);

       // Place here the first init of the DatePicker           
       $('.DateTimePicker').datepick( dateFormat: 'dd MM yyyy' );
    );        

    function InitializeRequest(sender, args) 
       // make unbind before update the dom, to avoid memory leaks.
       $('.DateTimePicker').unbind();
    

    function EndRequest(sender, args) 
       // after update occur on UpdatePanel re-init the DatePicker
       $('.DateTimePicker').datepick( dateFormat: 'dd MM yyyy' );
    
</script>

类似： Asp.Net UpdatePanel in Gridview Jquery DatePickerDatepicker for dynamically created controls

【讨论】：

非常感谢 - 你是对的，我正在使用更新面板。将按照您的建议进行更改并查看！

【参考方案2】：

$(函数 ()

        $('.DateTimePicker').datepick( dateFormat: 'dd MM yyyy' );
    );

这意味着它会击中一次。尝试像这样使用 forEach 函数：

$(function () 
        $('.DateTimePicker').each(function () 
            $(this).datepick( dateFormat: 'dd MM yyyy' );
         );
        //$('.DateTimePicker').datepick( dateFormat: 'dd MM yyyy' );
    );

【讨论】：

这不正确，选择器按原样选择所有控件，并应用于所有日期选择。如果你想进行操作，每个函数都是一个助手，但在这种情况下你什么都不做。