Question

我使用了Asp.net GridView，当然我已将其与我自己绑定，我使用以下代码从DB中选择表并将所有数据读入Gridview：

  protected void Button2_Click(object sender, EventArgs e) 
    { 
        DataTable dt = DataProvider.ExecuteDataTable("[dbo].[Get_LastInsertedRowHowzeEducation_SP]", CommandType.StoredProcedure); 
        GridView1.DataSource = dt; 
        GridView1.DataBind(); 
    }

其中一个与BirthDate相关的专栏，我设计了一个Jquery DatePicker TextBox，因此我希望将其作为{{Gridview列添加到其中一个TextBox列中1}}并删除默认的GridView TextBox。那么，我该怎么办呢？

Answer 1

您需要在GridView中使用模板列，然后连接JQuery日期选择器：

结果如下：

enter image description here

<asp:GridView runat="server" ID="gvpicker" AutoGenerateEditButton="true" OnRowEditing="gvpicker_RowEditing">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Label Text='<%# Eval("job_desc") %>' runat="server" />
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox runat="server" Text='<%# Bind("job_desc") %>' ID="myDatePicker" CssClass="myDatePickerClass" />
            </EditItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<script>
    $(function () {
        var $gv = $("table[id$=gvpicker]");
        var $rows = $("> tbody > tr:not(:has(th, table))", $gv);
        var $inputs = $(".myDatePickerClass", $rows);

        $rows.css("background-color", "yellow");

        $inputs.datepicker();
    });
</script>

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            this.BindGrid();
        }
    }

    protected void gvpicker_RowEditing(object sender, GridViewEditEventArgs e)
    {
        this.gvpicker.EditIndex = e.NewEditIndex;
        this.BindGrid();
    }

现在，如果您有自定义控件，只需替换

<asp:TextBox runat="server" Text='<%# Bind("job_desc") %>' ID="myDatePicker" CssClass="myDatePickerClass" />

用于自定义控件

在数据绑定控件内的模板部分中，您可以放置任何您喜欢的控件

Answer 2

您必须手动将列指定为TemplateField。
例如http://www.vkinfotek.com/gridview/templatefields-in-gridview.html

Answer 3

似乎，jQuery库和jQuery UI库都是你的项目。

＆＃13;

<script type="text/javascript">
  $(document).ready(function () {
    $('.dummy').datepicker();
  });
</script>

＆＃13;

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="100%">
  <Columns>
    <asp:BoundField DataField="Name" HeaderText="Name" />
    <asp:TemplateField HeaderText="DOJ">
      <ItemTemplate>
        <asp:TextBox ID="txtDate" runat="server" class="dummy"></asp:TextBox>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

＆＃13;

没有实施课程＆＃34;虚拟＆＃34;在css。这只是一个虚拟课程。我们使用它来识别Gridview中的那些文本框，我们希望jQuery在那里生成datepicker。

Answer 4

这里试试这个工作正常

<script src="js/jsDatepicker/bootstrap.js"></script>
    <%--<script src="js/jsDatepicker/jquery-1.10.2.js"></script>--%>
    <link href="js/jsDatepicker/jquery-ui.css" rel="stylesheet" />
    <script src="js/jsDatepicker/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".cal").datepicker({
                changeMonth: true,
                changeYear: true,
                yearRange: "1990:2100"
            });
        });
    </script>


<asp:TextBox ID="TextBox4"   placeholder="DD/MM/YYYY" CssClass="form-control cal" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ErrorMessage="*" ForeColor="Red" ControlToValidate="TextBox4" Display="Dynamic" runat="server" />

如何在gridview中包含DatePicker文本框？

4 个答案: