如何在JavaScript中显示注释线程层次结构

How to display comment thread hierarchy in JavaScript?

本文关键字：注释 线程 层次结构 显示 JavaScript      更新时间：2024-05-06

我有一组JSON注释。此JSON加载到浏览器中。我希望将注释显示为线程注释层次结构，首先显示最新的注释。为了找到合适的算法，我做了很多搜索。这当然是一个已解决的问题，但我找不到

解释JSON字段：

  • createdtime=划时代秒（创建注释的时间）
  • documentid=此注释的documentid
  • parentdocumentid=此评论作为回复的评论的文档ID
  • topleveldocumentid=包含评论的博客文章的文档ID属于

问题是，使用Javascript在HTML中将这些注释显示为层次结构的有效方法是什么？（Jquery代码很好）

[
    {
        "commenttext": "This is a comment",
        "parentdocumentid": "c88cbdd6d05811e19fe912314301329d",
        "doctype": "comment",
        "topleveldocumentid": "c88cbdd6d05811e19fe912314301329d",
        "createdtime": 1343222535,
        "documentid": "c0341e96d65b11e1a91d12314301329d"
    },
    {
        "commenttext": "This is a another comment",
        "parentdocumentid": "c88cbdd6d05811e19fe912314301329d",
        "doctype": "comment",
        "topleveldocumentid": "c88cbdd6d05811e19fe912314301329d",
        "createdtime": 1343222639,
        "documentid": "fe5209e0d65b11e1a91d12314301329d"
    },
    {
        "commenttext": "Yet another comment",
        "parentdocumentid": "c88cbdd6d05811e19fe912314301329d",
        "doctype": "comment",
        "topleveldocumentid": "c88cbdd6d05811e19fe912314301329d",
        "createdtime": 1343297245,
        "documentid": "b2d9f0f0d70911e1903d12314301329d"
    },
    {
        "commenttext": "I have a comment",
        "parentdocumentid": "c88cbdd6d05811e19fe912314301329d",
        "doctype": "comment",
        "topleveldocumentid": "c88cbdd6d05811e19fe912314301329d",
        "createdtime": 1343364418,
        "documentid": "1971ca6cd7a611e180fa12314301329d"
    }
]

编辑：以下是我的一些具体问题：具体来说，我的问题是：

1:这个JSON数据结构是链表吗？"（即每个项目指定其父项）

2：是否有一种众所周知的算法可以迭代链表并将其显示为排序的注释层次结构？如果可以，有人能给我介绍一下吗？

3：注释层次结构是"有序树"的同义词吗？

感谢

使用模板的下划线库和for ... in循环来循环遍历数组中的每个对象（注释）。

以下是使用这种方法应该遵循的基本模式的模型：

var data = {...your json obj...},
    markup = $("#tmpl").html(),
    commentTmpl = _.template(markup);
for (comment in data) {
    $("#comment-list").append( commentTmpl(comment) );
}

以及您的模板：

<script type="javascript/template">
    <li><%= commenttext %></li>
</script>

阅读这些内容以了解：

  • 骨干模板文档：http://underscorejs.org/#template
  • jQuery文档：http://jQuery.com（使用搜索功能了解anyjQuery方法）
相关文章：