javascript - 如何使用Ajax和JS方法在Mvc5视图中创建嵌套树视图(How can I create Nested Treeview in Mvc5 View with Ajax and JS approach)

Question

I have a simple MVC view which the department name.

(我有一个简单的MVC视图，其中部门名称。)

There is a hierarchy on the department which I use in the nested Treeview node.

(我在嵌套的Treeview节点中使用的部门上有一个层次结构。)

My current approach shows the TREEVIEW but only stops by 1 nested.

(我当前的方法显示了TREEVIEW，但仅停止了1个嵌套。)

I want to display all the existing department hierarchy in the Treeview.

(我想在Treeview中显示所有现有的部门层次结构。)

Something like the figure below:

(如下图所示：)

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

My mvc View:

(我的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>

My Ajax :

(我的Ajax：)

 $(".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();
        }

    });

Any Subjection is very welcome.

(任何服从都非常欢迎。)

  ask by PatsonLeaner translate from so

Answer 1

I have found a very good approach from @Sourav Mondal TreeView on Demand

(我从@Sourav Mondal TreeView on Demand找到了一个很好的方法)

Very quick and Accurate approach which I had to some changes on a JS script since it's old.

(因为它已经很老了，所以我必须对JS脚本进行一些快速，准确的更改。)

And the link it's just a tutorial and guideline.

(链接只是一个教程和指南。)

Hopefully, it's helping someone too.

(希望它也对某人有所帮助。)