如何在GridView中使用jQuery Countdown插件

时间:2014-09-09 13:52:10

标签: c# javascript jquery asp.net gridview

我想在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 !

及其我的gridview

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

1 个答案:

答案 0 :(得分:0)

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

<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 });
        }
    });