如何在网格视图中使用jquery.timeago插件和boundfield

How to use jquery.timeago plugin along with boundfield in the gridview?

本文关键字：timeago jquery 插件 boundfield 网格 视图      更新时间：2023-09-26

我有一个简单的网格视图，如下所示：

   <asp:GridView ID="gv_userActivities" runat="server" AutoGenerateColumns="False">
          <Columns>
            <asp:BoundField DataField="activity" HeaderText="Activity name" />
                <asp:BoundField DataField="activity_date" HeaderText="Activity date" />
            </Columns>
   </asp:GridView>

现在我想将jquery.timeago插件与我的边界字段Activity date一起使用。如何使用以下脚本访问绑定字段：

<script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('gv_userActivities.timeago').timeago();
      });
</script>

您需要使用模板字段，因为timeago插件希望您将title属性应用于相应的DOM元素，并且日期必须是ISO 8601格式的：

<asp:GridView ID="gv_userActivities" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:BoundField DataField="activity" HeaderText="Activity name" />
        <asp:TemplateField HeaderText="Activity date">
            <ItemTemplate>
                <span class="timeago" title="<%# string.Format("{0:o}", Eval("activity_date")) %>">
                    <%# Eval("activity_date") %>
                </span>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

这显然假设数据源中的activity_date属性是DateTime实例。如果不是，ToString("o")格式将不起作用，您将不得不在title属性中手动构建timeago插件可以理解的ISO8601日期。

然后：

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('.timeago').timeago();
    });
</script>
相关文章：