MVC 中使用TreeView

最新推荐文章于 2020-12-21 22:52:18 发布

_iorilan

最新推荐文章于 2020-12-21 22:52:18 发布

阅读量3.6k

点赞数 2

分类专栏： ASP.NET MVC c# 编程

本文链接：https://blog.csdn.net/lan_liang/article/details/43485779

版权

c# 编程同时被 2 个专栏收录

294 篇文章 3 订阅

订阅专栏

ASP.NET MVC

47 篇文章 1 订阅

订阅专栏

为了灵活性，本例中实现是在View中完成递归逻辑，因此可以在递归过程中控制样式，内容的render

也可以选择在后端完成递归逻辑返回partial 然后在前端jquery中加class

1. 从这里下载
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

2. 将以下3个文件copy到项目中，如下所示：

3. 准备view model

public class JqTreeViewNode
    {
        public string Name { get; set; }
        public IList<JqTreeViewNode> Children { get; set; }


        public JqTreeViewNode()
        {
            Children = new List<JqTreeViewNode>();
        }
        public static JqTreeViewNode CreateTest()
        {
            return new JqTreeViewNode()
            {
                Name = "Root",
                Children = new List<JqTreeViewNode>()
                {
                    new JqTreeViewNode()
                    {
                        Name = "ChildLvl1-1",
                        Children = new List<JqTreeViewNode>
                        {
                            new JqTreeViewNode()
                            {
                                Name = "ChildLvl2-1",
                                Children = new List<JqTreeViewNode>()
                                {
                                    new JqTreeViewNode()
                                    {
                                        Name = "ChildLvl3-1",
                                    },
                                    new JqTreeViewNode(){Name = "ChildLv3-2"},
                                    new JqTreeViewNode(){Name = "ChildLv3-3"}
                                }
                            },
                            new JqTreeViewNode(){Name = "ChildLv2-2"}
                        }
                    },
                    new JqTreeViewNode(){Name = "ChildLv1-2"}
                }
            };
        }
    }

4. controller

public ActionResult Index()
        {


            return View(JqTreeViewNode.CreateTest());
        }

5. view

@model WebApplication1.Controllers.JqTreeViewNode


<link href="~/Content/External/jquery.treeview.css" rel="stylesheet" />
@section scripts{
    <script src="~/Content/External/jquery.treeview.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".treeview-gray").treeview({ collapsed: true });
    });


</script>


}


<div>
    JqTreeView
</div>
<div>
    @Html.Partial("JqTreeView", Model)
</div>

6. partial view (也可用display template)

@using WebApplication1.Controllers
@model WebApplication1.Controllers.JqTreeViewNode


<ul style="margin: 5px" class="treeview-gray">
    @{
        if (Model.Children.Any())
        {
            foreach (JqTreeViewNode item in Model.Children)
            {


                <li style="margin-left: 20px">
                    @item.Name
                    @{
                if (item.Children.Any())
                {
                    @Html.Partial("JqTreeView", item)
                }
                    }


                </li>
            }
        }
    }
</ul>

7.查看结果