从数据库显示层次数据？ [英] Displaying hierarchical data from database?

问题描述

我正在工作的一个项目的前端，任务是显示一些在数据库中被组织为层次结构的数据。我还没有使用这些类型的数据，而我的第一个访问是gridview，它只显示parent，而没有显示任何数据。我已经搜索了几个选项，但大多数看起来像他们使用ADO.NET或Linq查询数据库，而我需要使用实体框架实现的后端选项。我的后端开发人员设置了这种方法来返回资产数据：

  public List< AssetEntity> GetAllAssets（）
 {
列表< AssetEntity> getAllAssets = dal.SelectAsset（1）; 
 Error = dal.Error; 
 return getAllAssets; 
} 
  

树视图听起来像我最好的选择，但我不知道什么控件或如何用EF实现。任何线索？谢谢！

解决方案

在html中显示树可以通过嵌套无序列表完成：

 < ul class =tree> 
< li>< div>项1< / div>< / li> 
< li>< div>项目2< / div>< / li> 
< li>< div>项3< / div> 
< ul> 
< li>< div>项目3.1< / div>< / li> 
< li>< div>项目3.2< / div> 
< ul> 
< li>< div>项目3.2.1< / div>< / li> 
< li>< div>项目3.2.2< / div>< / li> 
< / ul> 
< / li> 
< / ul> 
< / li> 
< / ul> 
  

有些CSS让它看起来更像树：

  ul 
 {
 list-style：none; 
 / * list-style-image：url（'your_image_url_here'）* / 
} 
  

和jQuery展开/折叠子节点点击：

  $（function（）{
 $（。tree li div）。click（function（）
 {
 var children = $（this）.parent（li）。children（ul）; 
 if（children.length> 0）
 {
 if（children.is（：visible））
 {
 children.hide（）; 
} 
 else 
 {
 children.show（）; 
} 
} 
}）; 
}）; 
  

完整示例： http://jsfiddle.net/eQxTs/5/

您可以使用部分视图或DislayTemplates来渲染剃须刀中的列表对于AssetEntity的每个列表。通过在每个AssetEntity中使用相同的PartialView迭代子集合您将获得递归以使其成为树。

剃刀：

  @model IEnumerable< AssetEntity> 
 
< ul> 
 @foreach（模型中的var项）
 {
< li> @ item.Name 
 @ Html.DisplayFor（m => item.Children）
 < /锂> 
} 
< / ul> 
  

I'm working the front end of a project tasked with displaying some data that is organized as hierarchical in the database. I've yet to work with these kind of data types and my first go-to was gridview which only displayed the "parent" and none of the data beneath. I've googled several options but most look like they use ADO.NET or Linq to query the database whereas I need an option for the back-end that is implemented with the entity framework. My back end dev has set up this method to return the asset data:

public List<AssetEntity> GetAllAssets()
{
    List<AssetEntity> getAllAssets = dal.SelectAsset(1);
    Error = dal.Error;
    return getAllAssets;
}

A treeview sounds like my best option but I'm not sure what control or how to implement this with EF. Any clues? Thanks!

解决方案

Displaying a tree in html can be accomplished by nested unordered lists:

<ul class="tree">
    <li><div>Item 1</div></li>
    <li><div>Item 2</div></li>
    <li><div>Item 3</div>
        <ul>
            <li><div>Item 3.1</div></li>
            <li><div>Item 3.2</div>
                 <ul>
                    <li><div>Item 3.2.1</div></li>
                    <li><div>Item 3.2.2</div></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Some css to make it look more tree-like:

ul
{
    list-style:none;
    /*list-style-image: url('your_image_url_here')*/
}

And jQuery to Expand/Collapse child-nodes on click:

$(function(){
    $(".tree li div").click(function()
        {
            var children = $(this).parent("li").children("ul");
            if(children.length > 0)
            {
                if(children.is(":visible"))
                {
                   children.hide();
                }
                else
                {
                   children.show();
                }
            }   
        });
});

Full sample: http://jsfiddle.net/eQxTs/5/

You can render the list in razor by using Partial Views or DislayTemplates for each list of AssetEntity. By iterating over the child collection with the same PartialView in each AssetEntity You will get the recursion to make it a tree.

Razor:

@model IEnumerable<AssetEntity>

<ul>
@foreach (var item in Model)
{
       <li>@item.Name
          @Html.DisplayFor(m => item.Children)
       </li>
}
</ul>

这篇关于从数据库显示层次数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！