如何在 GridView 中使用 jQuery Countdown 插件答案

【问题标题】：how use jQuery Countdown plugin in a GridView如何在 GridView 中使用 jQuery Countdown 插件
【发布时间】：2014-09-09 13:52:09
【问题描述】：

我想在 Gridview 中使用这个 jQuery Countdown 插件：http://keith-wood.name/countdown.html！每行都有一个从数据库绑定的 DeadLine 时间，我不知道如何绑定这些日期！看看这段代码：

    <script>
$(function () {
    var austDay = new Date();
    austDay = new Date(2014, 8, 10); // the count down date !
    $('#defaultCountdown').countdown({until: austDay});
    });
</script>

<div id="defaultCountdown"></div> // count down will be shown here !

它是我的网格视图

<asp:GridView ID="GroupExsGridView" Width="100%"
             BorderWidth="0"  runat="server">

            <Columns>

              <asp:TemplateField>
                  <ItemStyle BorderWidth="0"  />
                  <ItemTemplate >

                      <div class="alert alert-info" role="alert">
                      <asp:Label CssClass="h5" ID="Exsddeadline" runat="server" Text='<%# Bind("GDeadLine") %>'></asp:Label><br /><br />
                          </div>

                  </ItemTemplate>
              </asp:TemplateField>
            </Columns>
        </asp:GridView>

【问题讨论】：

标签： c# javascript jquery asp.net gridview

【解决方案1】：

我解决了我的问题！看看下面的代码！

<asp:GridView ID="GroupExsGridView" Width="100%"
             BorderWidth="0" ShowFooter="false" DataKeyNames="GroupExsID"  OnRowDataBound="GroupExsGridView_RowDataBound" ShowHeader="false" EmptyDataText="هیچ تمرینی موجود نیست" AutoGenerateColumns="false" AllowPaging="false" AllowSorting="false" PageSize="50" runat="server">

            <Columns>

              <asp:TemplateField>
                  <ItemStyle BorderWidth="0"  />
                  <ItemTemplate >

                      <div class="alert alert-info" role="alert">
                          <asp:Label ID="ExsName" CssClass="h4" Text='<%# Bind("GExsName") %>' runat="server" ></asp:Label><br />
                      <asp:Label CssClass="h5" ID="ExsdES" style="word-wrap:break-word;" runat="server" Text='<%# Bind("GExsDes") %>'></asp:Label><br /><br />

                               <div class="defaultCountdown" id="defaultCountdown" runat="server"></div>
                          <asp:Label ID="ExsDeadLine" style="display:none" runat="server" Text='<%# Bind("GExsDeadLine")%>'></asp:Label>

                          </div>
                      <asp:HyperLink ID="DownloadLink" Target="_blank" NavigateUrl='<%# Bind("GExsFilePath") %>' CssClass=" btn btn-lg btn-link pull-left" runat="server">دانلود</asp:HyperLink>
                      <asp:LinkButton ID="DeleteExs" CssClass=" btn btn-lg btn-link pull-left" OnClick="DeleteExs_Click"  runat="server">حذف</asp:LinkButton>
                   <asp:Label ID="HelpText" CssClass="small" runat="server" Text="تاریخ ارسال:"></asp:Label>
                     <asp:Label ID="ExsDate" CssClass="small" runat="server" Text='<%# fbTime( (DateTime)Eval("GExsDate") ) %>'></asp:Label>

                      <hr />
                  </ItemTemplate>
              </asp:TemplateField>
            </Columns>
        </asp:GridView>

 <script>
    $(function () {
        var gridview = document.getElementById("<%= GroupExsGridView.ClientID %>");

            for (i = 0; i < gridview.rows.length; i++) {
            var la = document.getElementById("ContentPlaceHolder1_GroupExsGridView_ExsDeadLine_" + i);
            var austDay = new Date(la.innerHTML);
            $('#ContentPlaceHolder1_GroupExsGridView_defaultCountdown_' + i).countdown({ until: austDay });
        }
    });

【讨论】：