在代码后面显示像树一样的数据

时间:2013-10-15 11:13:40

标签: c# asp.net webmethod

我有一张下面列出的表格

ID   Name   Parent
1     A       0
2     B       1
3     c       1
4     D       2
5     E       2
6     F       0
..    ..      ..

我需要的是显示它

 - A
    -B
     - D
     - E 
    -C

 - F

我在c#中制作datatables

我使用jquery-ajax获取数据并从web method准备html,但我不想使用任何插件来制作树视图。

选择dtParent中的记录,其中Parent = 0

在此之后,我试图过滤子条目的记录。

我相信这可以通过递归轻松完成,但我无法找到正确的逻辑。

我试过的代码(dtGoals是我拥有所有记录的表格,在dtData中我只得到父母)

dtData = dtGoals;
dtData.DefaultView.RowFilter = "ID = " + dtGoals.Rows[goalCount]["GoalId"].ToString();
dtData.AcceptChanges();
dtData = dtData.DefaultView.ToTable();

RowFilter父记录在dtData之后。使用第一个记录(ID = 1)创建树节点。现在我不知道如何继续。

任何帮助将不胜感激。

提前致谢。

2 个答案:

答案 0 :(得分:1)

public class Item
{
    public Item()
    {
        Children = new List<Item>();
    }

    public int Id { get; set; } 
    public string Name { get; set; } 
    public int ParentId { get; set; }
    public List<Item> Children { get; set; } 
}

public class TreeBuilder
{
    public TreeBuilder(IEnumerable<Item> items)
    {
        _items = new HashSet<Item>(items);
        TreeRootItems = new List<Item>();
        TreeRootItems.AddRange(_items.Where(x => x.ParentId == 0));
        BuildTree(TreeRootItems);
    }

    private readonly HashSet<Item> _items;
    public List<Item> TreeRootItems { get; private set; }


    public void BuildTree(List<Item> result)
    {
        foreach (var item in result)
        {
            item.Children.AddRange(_items.Where(x => x.ParentId == item.Id));
            BuildTree(item.Children);
        }
    }
}

答案 1 :(得分:0)

jQuery解决方案:

http://jsfiddle.net/Pascalz/HqDBX/

HTML:

<div id="0">
</div>

Javascript:

var datas = [
    {ID:1,Name:"A",Parent:0},
    {ID:2,Name:"B",Parent:1},
    {ID:3,Name:"C",Parent:1},
    {ID:4,Name:"D",Parent:2},
    {ID:5,Name:"E",Parent:2},
    {ID:6,Name:"F",Parent:0}
];

$.each(datas, function (index, item) {
   $('#' + String(item.Parent)).append($('<div class=\'t\' id=\'' + item.ID + '\'>' + item.Name + '</div>'));
});

CSS:

div {
    margin-left: 10px;
}
div.t:before{content: "- "}