我在 asp.net 中使用 Datagrid 我的 TextBox 在 DataGrid 内。我想通过 jQuery 或 Ajax 在数据网格中单击文本框上的 datetimepicker
请帮我。
提前致谢。
在这里你去jQuery UI DatePicker
<script>
$(function() {
$( ".datepicker" ).datepicker();
});
</script>
<input class="datepicker" type="text" runat="server">
在 gridview 的项目模板中分配类
像这样试试
$(document).ready(function(){
("#textbox_id").datepicker({dateFormat: "yy-mm-dd hh:mm:ss"});
})
检查这个例子。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataGrid.aspx.cs" Inherits="DataGrid" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:GridView ID="gvItems" runat="server">
<Columns>
<asp:TemplateField HeaderText="Date">
<ItemTemplate>
<asp:TextBox runat="server" id="txtDate" CssClass="txtDate">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<script type="text/javascript">
$(document).ready(function () {
$(".txtDate").datepicker();
});
</script>
</form>
</body>
</html>
试试这个并测试它应该可以工作。
在您的代码隐藏中。
// Property which will hold your script
protected String Script
{
get;
set;
}
您将绑定数据的代码隐藏。
Script = String.Empty;
uxGrid.DataSource = WebApplication1.DummyData.GetTempDataTable();
uxGrid.DataBind();
Script = "$(document).ready(function () { " + Script + " });";
Page.ClientScript.RegisterStartupScript(this.GetType(), "DateTimeView", Script.ToString(), true);
网格项绑定事件。(代码隐藏)
protected void uxGrid_ItemDataBound(object sender, DataGridItemEventArgs e)
{
TextBox txt = (TextBox)e.Item.FindControl("uxDTP");
if (txt != null)
{
Script += RegisterClientScriptDateTimeView(txt.ClientID);
}
}
public string RegisterClientScriptDateTimeView(string controlId)
{
StringBuilder script = new StringBuilder("");
script.AppendFormat(" $('#{0}').datetimepicker();", controlId);
return script.ToString();
}
在您的 aspx 设计文件中:
<asp:DataGrid ID="uxGrid" runat="server" CellPadding="4" ForeColor="#333333"
GridLines="None" onitemdatabound="uxGrid_ItemDataBound" AutoGenerateColumns="false" >
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:TextBox runat="server" ID="uxDTP" TextMode="SingleLine"></asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
将此脚本包含在您的脚本管理器或 aspx 页面中:
<asp:ScriptManager runat="server" ID="uxScriptManager" LoadScriptsBeforeUI="true">
<Scripts>
<asp:ScriptReference Path="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" />
<asp:ScriptReference Path="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" />
<asp:ScriptReference Path="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js" />
</Scripts>
</asp:ScriptManager>