我有一个可编辑的 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>
正如您所看到的,该网格视图作为底部的按钮,允许用户向网格视图添加行。
我想为我的日期列弹出一个日历,所以我使用了 jQuery (基思·伍德) 并像这样调用 JS 函数:
$(function () {
$('.DateTimePicker').datepick({ dateFormat: 'dd MM yyyy' });
});
在我的网格视图中,第一次单击“日期”文本框(第一行)时,会弹出日历。但是,一旦我向网格视图添加一行,日历功能就不再出现。
这是我从代码隐藏添加新行到 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();
}
任何想法为什么我的日历在我向网格视图添加新行后不会弹出?
Cheers!
发生这种情况的唯一情况是当您使用 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>
相似的:Gridview Jquery DatePicker 中的 Asp.Net UpdatePanel
用于动态创建控件的日期选择器
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)