2

我用过 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 相关的列，我设计了 aJquery DatePicker TextBox所以我想将它Gridview作为 a 包含在其中一个列中TextBox并删除默认值GridView TextBox。那么，我该怎么做呢？

4

4 回答 4

2

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

结果如下：

在此处输入图像描述

<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" />

为您的自定义控件

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

于 2012-10-07T07:26:55.160 回答
0

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

于 2012-10-07T07:21:21.403 回答
0

看来，jQuery 库和 jQuery UI 库适用于您的项目。

<script type="text/javascript">
  $(document).ready(function () {
    $('.dummy').datepicker();
  });
</script>
<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>

css 中没有“dummy”类的实现。它只是一个虚拟类。我们用它来识别那些在 Gridview 中的文本框，我们希望 jQuery 在那里生成 datepicker。

于 2015-05-27T10:16:50.230 回答
0

在这里试试这个工作正常

<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" />
于 2017-05-31T10:53:12.940 回答