Question

我想在我的网站上添加评论树视图，但我仍然坚持渲染多级UL。假设我有一些项[item（父项）]：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。

我的班级看起来像这样：

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

用于渲染多级html列表的算法

1 个答案: