html - 渲染多级html列表的算法

Question

我想向我的网站添加评论 TreeView ，但我受困于渲染多级 UL。 假设我有一些项目[项目(父项目)]:i1(null)，i2(i1)，i3(null)，i4(i3)，i5(i4)，i6(i4)，i7(i3)，i8 (无效的)。每个项目也有一个时间戳，最新的项目应该在最上面。

目标:

<ul>
    <li>
        <ul>
            <li>i1</li>
            <li>
                <ul>
                    <li>i2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li>i3</li>
            <li>
                <ul>
                    <li>i4</li>
                    <li>
                        <ul>
                            <li>i5</li>
                            <li>i6</li>
                        </ul>
                    </li>
                    <li>i7</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li>i8</li>
        </ul>
    </li>
</ul>

谁能推荐一个算法？

Answer 1

找到算法here .

我的类(class)是这样的:

 public class LiItem
{
    public int Id { get; set; }
    public int? ParentId { get; set; }
    public string Text { get; set; }
    public bool IsRendered { get; set; }
}

public class TreeViewRenderer
{
    private IEnumerable<LiItem> _liItems;

    public string Render(string treeId, IEnumerable<LiItem> liItems)
    {
        _liItems = liItems;

        StringBuilder sb = new StringBuilder();

        sb.AppendFormat("<ul id='{0}'>\r\n", treeId);

        if (_liItems.Count() == 0)
        {
            sb.AppendFormat("<li>List is empty</li>");
        }

        foreach (var item in _liItems.Where(i => !i.ParentId.HasValue))
        {
            RenderLi(sb, item);
            AppendChildren(sb, item);
        }

        sb.AppendLine("</ul>");

        return sb.ToString();
    }

    private void AppendChildren(StringBuilder sb, LiItem root)
    {
        var children = _liItems.Where(i => i.IsRendered == false && i.ParentId == root.Id);

        if (children.Count() == 0)
        {
            sb.AppendLine("</li>");
            return;
        }

        sb.AppendLine("\r\n<ul>");
        foreach (var item in children)
        {
            RenderLi(sb, item);
            AppendChildren(sb, item);
        }

        sb.AppendLine("</ul></li>");
    }

    private void RenderLi(StringBuilder sb, LiItem item)
    {
        sb.AppendFormat("<li>{0}", item.Text);
        item.IsRendered = true;
    }
}