Luckycall/ReportWebCore/SuperAdmin/Views/Tree/TreePartial.cshtml

@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@

@using SuperAdmin.Controllers;
@using SuperAdmin.Models.View;
@using SuperAdmin.Models.Object;

@model TreeViewModel


@{
    for (int i = 0; i < Model.rows.data.Count; i++)
    {
        RowStructure row = Model.rows.data[i];
        <li id="replaceable-@row.id">
            <div class="caret caret-@row.id none-parent-style title clickable-@row.id" value="@row.id">
                @row.name_global
            </div>
            <ul class="nested">
                <li id="child-items-@row.id">
                </li>
            </ul>
            <script>
                var toggler = document.getElementsByClassName("caret-@row.id");
                var i;

                for (i = 0; i < toggler.length; i++) {
                    toggler[i].addEventListener("click", function () {
                        this.parentElement.querySelector(".nested").classList.toggle("active");
                        this.classList.toggle("caret-down");
                    });
                }

                var div_list = document.querySelectorAll('.clickable-@row.id'); // returns NodeList
                var div_array = [...div_list]; // converts NodeList to Array
                div_array.forEach(div => {
                    // do something awesome with each div
                    //div.addEventListener('contextmenu', e => {
                    //    e.preventDefault();
                    //    var itemID = e.target.getAttribute("value");
                    //    $("#itemID").val(itemID);

                    //    var w = $(window);
                    //    if (window.scrollY + e.clientY - w.scrollTop() < 700) {
                    //        menu.style.top = `${window.scrollY + e.clientY - 100}px`;
                    //        menu.style.left = `${window.scrollX + e.clientX - 200}px`;
                    //        menu.classList.add('show-top');
                    //    } else {
                    //        menu.style.top = `${window.scrollY + e.clientY - 200}px`;
                    //        menu.style.left = `${window.scrollX + e.clientX - 200}px`;
                    //        menu.classList.add('show-bottom');
                    //    }
                    //    //outClick.style.display = "block";
                    //});
                });

                $(".clickable-@row.id").on("click", function () {
                    var id = $(this).attr("value");
                    $(this).removeClass("none-parent-style");
                    $(this).addClass("parent-style");
                    //console.log("clickable " + id);
                    $.ajax({
                        type: "POST",
                        url: urlConfig("/Tree/GetTreeData"),
                        headers: { 'RequestVerificationToken': $('input[name=__RequestVerificationToken]').val() },
                        data: {
                            "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val(),
                            id: id,
                        },
                        success: function (data) {
                            //console.log(data);
                            $('#child-items-' + id).html(data);
                            getTableAction(id);
                        },
                        failure: function (data) {
                            console.log(data);
                            alert(data);
                        },
                        error: function (data) {
                            console.log(data);
                            alert(data);
                        }
                    });
                })
            </script>
        </li>
    }
}