Question

我正在处理一个项目的前端，该项目的任务是显示在数据库中按层次结构组织的一些数据。我还没有使用这些数据类型，我的第一个目标是gridview，它只显示“父”，而下面没有任何数据。我已经google了几个选项，但大多数看起来他们使用ADO.NET或Linq查询数据库，而我需要一个选项用于实体框架实现的后端。我的后端开发人员已设置此方法以返回资产数据：

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

树视图听起来像是我最好的选择，但我不确定用EF控制或如何实现这一点。有线索吗？谢谢！

Answer 1

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

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

有些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/

您可以使用Partial Views或DislayTemplates为每个AssetEntity列表在剃刀中呈现列表。通过在每个AssetEntity中使用相同的PartialView迭代子集合，您将获得递归以使其成为树。

剃刀：

@model IEnumerable<AssetEntity>

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

显示数据库的分层数据？

1 个答案: