如何在编辑模式 ASP .Net 中将日期选择器放在 Gridview 中

Posted 2023-02-22

【中文标题】如何在编辑模式 ASP .Net 中将日期选择器放在 Gridview 中

【英文标题】：How Can I put Date Picker in Gridview in edit mode ASP .Net

【发布时间】：2013-12-26 01:41:06

【问题描述】：

我想在编辑模式下将gridview 中的默认文本字段更改为javascript 日期选择器？如何编码？

下面的代码（Gridview）：

<asp:GridView id="grdViewEmpList" runat="server" AutoGenerateColumns="false" PageSize="5" allowpaging="true" Font-Size="11px" OnRowDataBound="grdViewEmpList_RowDataBound"
            GridLines="Both" ShowFooter="false" CssClass="gridview" CellPadding="4" Width="750px" OnRowEditing="grdViewEmpList_RowEditing"
            PagerSettings-Mode="Numeric" AllowSorting="true" autopostback="true" ShowHeaderWhenEmpty="True" OnRowCancelingEdit="grdViewEmpList_RowCancelingEdit"
            EmptyDataText="No record found" OnRowCreated="grdViewEmpList_RowCreated" OnPageIndexChanging="grdViewEmpList_PageIndexChanging" OnRowUpdating="grdViewEmpList_RowUpdating">
        <RowStyle Wrap="true" ForeColor="#666666" BorderColor="#FFFFFF" BorderWidth="0" BackColor="#CCCCFF" CssClass="gridview_alter"/>
        <AlternatingRowStyle Wrap="true" ForeColor="#666666" BorderColor="#CCCCCC" BorderWidth="0" BackColor="#FFFFFF" CssClass="gridview_alter"/>
        <Columns>
            <asp:CommandField ShowEditButton="True" EditText="Edit" UpdateText="Save" ButtonType="Image" ItemStyle-HorizontalAlign="Center" HeaderText="Action" EditImageUrl="~/Images/dotNet/pencil.png" CancelImageUrl="~/Images/dotNet/edit-not-validated-icon.png" UpdateImageUrl="~/Images/dotNet/edit-validated-icon.png"/>
            <asp:BoundField DataField="EMP_ID" readonly="true" ItemStyle-Height="20px" HeaderText="Employee ID" HeaderStyle-CssClass="allWidth100" />
            <asp:BoundField DataField="NAME" readonly="true" HeaderText="Name" HeaderStyle-CssClass="allWidth460" />
            <asp:BoundField DataField="EFF_DATE" HeaderText="Effective Date" HeaderStyle-CssClass="allWidth100" DataFormatString="0:d" ItemStyle-HorizontalAlign="Center" ControlStyle-CssClass="txtCommon allWidth80 txtCenter" />
        </Columns>
        <PagerSettings Mode="Numeric" PageButtonCount="5" Position="Bottom" />
        <PagerStyle ForeColor="#FFCC33" HorizontalAlign="left" CssClass="gridview_pager"/>
    </asp:GridView>

我想在EFF_DATE列的gridview上方放入html日期选择器的代码：

<input type="text" id="txtEffDate" name="txtEffDate" class="txtCommon allWidth80" value="" readonly="readonly" />
<img  src="../Images/DateTimePickerImg/cal.gif" style="cursor: pointer;" onclick="javascript: NewCssCal('txtEffDate')" />

【问题讨论】：

FlopScientist 和 Jumpei Tanaka 的答案都是正确的。使用<asp:TemplateField> 是关键。

【参考方案1】：

您可以添加日期选择器以使用TemplateField，如下所示。

            <asp:TemplateField HeaderText="Effective Date" 
                SortExpression="EFF_DATE" >
                <ItemTemplate>
                    <asp:Label ID="lblEffDate" runat="server" Text='<%#Bind("EFF_DATE") %>' />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ClientIDMode="Static" ID="txtEffDate" runat="server" Text='<%#Bind("EFF_DATE") %>' />
                    <img  src="../Images/DateTimePickerImg/cal.gif" style="cursor: pointer;" onclick="javascript: NewCssCal('txtEffDate')" />
                </EditItemTemplate>
            </asp:TemplateField>

【参考方案2】：

在这种情况下使用<asp:TemplateField>。

BoundField 被 GridView 等数据绑定控件用于将字段的值显示为文本。因此，您也可以在使用 TemplateField 时将 Label 用于相同目的，[即使用模板定义列的布局时]

因此，更改您的字段的标记：EFF_DATE 从

 <asp:BoundField DataField="EFF_DATE" HeaderText="Effective Date" 
      HeaderStyle-CssClass="allWidth100" DataFormatString="0:d" 
      ItemStyle-HorizontalAlign="Center" 
      ControlStyle-CssClass="txtCommon allWidth80 txtCenter" />

对此：

 <asp:TemplateField>
    <ItemTemplate>
        <asp:Label runat="server" ID="lnl1" 
          Text='<%#DataBinder.Eval(Container.DataItem, "EFF_DATE").ToString()%>'>
        </asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
          <input type="text" id="txtEffDate" name="txtEffDate" 
                 class="txtCommon allWidth80" value="" readonly="readonly" />
          <img  src="../Images/spain.png" style="cursor: pointer;"
               onclick="javascript: NewCssCal('txtEffDate')" />
    </EditItemTemplate>
  </asp:TemplateField>

【参考方案3】：

您可以使用 TemplateField 在编辑模式中添加日期选择器。向文本框添加自定义类，

<asp:TemplateField HeaderText="Effective Date" SortExpression="EFF_DATE" >
    <ItemTemplate>
        <asp:Label ID="lblEffDate" runat="server" Text='<%#Bind("EFF_DATE") %>' />
    </ItemTemplate>
    <EditItemTemplate>
         <asp:TextBox ClientIDMode="Static" ID="txtEffDate" runat="server" Text='<%#Bind("EFF_DATE") %>'  CssClass="Datepicker"/>
    </EditItemTemplate>
</asp:TemplateField>    

通过使用您的 gridview ID，您可以将 datepicker 绑定到您的文本框。

$(function () 
        var $gv = $("table[id$=grdViewEmpList]");
        var $rows = $("> tbody > tr:not(:has(th, table))", $gv);
        var $inputs = $(".Datepicker", $rows);
        $inputs.datepicker();
);