如何使用 Ajax 和 JS 方法在 Mvc5 视图中创建嵌套树视图

Question

我有一个简单的 MVC 视图，其中包含部门名称。 我在嵌套的 Treeview 节点中使用的部门有一个层次结构。 我当前的方法显示了 TREEVIEW，但仅嵌套了 1 个。

我想在 Treeview 中显示所有现有的部门层次结构。 类似于下图：

> Galaxy Department
    |
    |___> Moon Department
        |
        |____> Starts Department
            |
            |___> Cloud department
                |   
                |___> And so on....

我的 mvc 视图：

<div class="col-md-3" style="border:1px solid black; height:725px; background-color:#FAFAFA">
                <span style="font-weight:500;"><a href="#tabActiveDepartment" onclick="mylistchceked()">Triple4</a></span>
                @{
                    <div class="treeview">
                        @{
                            if (Model != null && Model.Count() > 0)
                            {

                                <ul>
                                    @foreach (var i in Model)
                                    {
                                        <li>
                                            <span class="collapse collapsible" data-loaded="false" pid="@i.DepartId">&nbsp;</span>

                                            <span>
                                                <a href="#@i.NavUrl" id="#Loker&keysAshed" onclick="mydevpartmanifested()">@i.DepatName</a>

                                            </span>


                                        </li>
                                    }
                                </ul>
                            }
                        }
                    </div>
                }
            </div>

我的阿贾克斯：

 $(".collapsible").on("click", function (e) { 
        e.preventDefault();

        var this1 = $(this); // Get Click item 
        var data = {
            pid: $(this).attr('pid')
        };

        var isLoaded = $(this1).attr('data-loaded'); // Check data already loaded or not
        if (isLoaded == "false") {
            $(this1).addClass("loadingP");   // Show loading panel
            $(this1).removeClass("collapse");

            // Now Load Data Part1
            $.ajax({
                url: "/Department/GetTreeViewList/",
                type: "GET",
                data: data,
                dataType: "json",
                success: function (d) {
                $(this1).removeClass("loadingP");    
                    if (d.length > 0) {    
                        var $ul = $("<ul></ul>");
                        //var result;
                        $.each(d, function (i, ele) {
                            $ul.append(
                                $("<li></li>").append(
                                    "<span class='collapse collapsible' data-loaded='false' pid='" + ele.DepartId + "'>&nbsp;</span>" +
                                    "<span><a href='" + ele.NavUrl + "' id='directavail' >" + ele.DepatName + "</a></span>" 

                                )                             
                            )
                        });
                        //$("[data-role=collapsible]").trigger("collapse");
                        $(this1).parent().append($ul);
                        $(this1).addClass('collapse');
                        $(this1).toggleClass('collapse expand');
                        $(this1).closest('li').children('ul').slideDown();
                    }
                    else {
                        // no sub menu
                        $(this1).css({ 'dispaly': 'inline-block', 'width': '15px' });
                    }

                    $(this1).attr('data-loaded', true);
                },
             error: function () {
                    alert("Error!");
                }

            });
        }
        else {
            // if already data loaded
            $(this1).toggleClass("collapse expand");
            $(this1).closest('li').children('ul').slideToggle();
        }

    });

任何服从是非常受欢迎的。

Answer 1

我从@Sourav Mondal TreeView on Demand找到了一个非常好的方法

非常快速和准确的方法，我不得不对 JS 脚本进行一些更改，因为它很旧。 链接只是一个教程和指南。

希望它也能帮助某人。