javascript - 它使用 ASP.NET MVC 和 javascript 在 TreeView 中显示 "undefined"

Question

当使用 ASP.NET MVC 和 Gijgo TreeView JQuery 插件从 oracle 数据库中获取数据时，它在 TreeView 结构中显示“未定义”， TreeView 控件可以显示分层(或嵌套，或递归)的集合可扩展节点树中的数据。如何解决这个问题？请任何人帮助我。

我正在尝试这个链接

https://www.codeproject.com/Articles/1185174/How-to-create-Dynamic-draggable-and-droppable-Tree

@section Scripts {
    @Scripts.Render("~/bundles/Scripts/jqueryval") <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="@Url.Content("~/Scripts/conditional-validation.js")" type="text/javascript"></script>
    <script src="~/Scripts/Gijgo/gijgo.js"></script>
    <link href="http://code.gijgo.com/1.3.0/css/gijgo.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        //'Hierarchy/GetHierarchy'
        $(document).ready(function () {
            var Usertree = "";
            var tree = "";
            $.ajax({
                type: 'get',
                dataType: 'json',
                cache: false,
                url: '/Hierarchy/GetHierarchy',
                success: function (records, textStatus, jqXHR) {
                    tree = $('#tree').tree({
                        primaryKey: 'Id',
                        dataSource: records,
                        dragAndDrop: true,
                        checkboxes: true,
                        iconsLibrary: 'glyphicons',
                        //uiLibrary: 'bootstrap'
                    });
                    Usertree = $('#Usertree').tree({
                        primaryKey: 'ID',
                        dataSource: records,
                        dragAndDrop: false,
                        checkboxes: true,
                        iconsLibrary: 'glyphicons',
                        //uiLibrary: 'bootstrap'
                    });

                    tree.on('nodeDrop', function (e, ID, PID) {
                        currentNode = ID ? tree.getDataById(Id) : {};
                        console.log("current Node = " + currentNode);
                        parentNode = PID ? tree.getDataById(PID) : {};
                        console.log("parent Node = " + parentNode);

                        if (currentNode.PID === null && parentNode.PID === null) {
                            alert("Parent node is not droppable..!!");
                            return false;
                        }
                        // console.log(parent.HierarchyLevel);
                        var params = { id: ID, parentId: PID };
                        $.ajax({
                            type: "POST",
                            url: "/Hierarchy/ChangeNodePosition",
                            data: params,
                            dataType: "json",
                            success: function (data) {
                                $.ajax({
                                    type: "Get",
                                    url: "/Hierarchy/GetHierarchy",
                                    dataType: "json",
                                    success: function (records) {
                                        Usertree.destroy();
                                        Usertree = $('#Usertree').tree({
                                            primaryKey: 'ID',
                                            dataSource: records,
                                            dragAndDrop: false,
                                            checkboxes: true,
                                            iconsLibrary: 'glyphicons',
                                            //uiLibrary: 'bootstrap'
                                        });
                                    }
                                });

                            }
                        });

                    });

                    $('#btnGetValue').click(function (e) {
                        var result = Usertree.getCheckedNodes();
                        if (result == "") { alert("Please Select Node..!!") }
                        else {
                            alert("Selected Node id is= " + result.join());
                        }
                    });
                       //delete node
                    $('#btnDeleteNode').click(function (e) {
                        e.preventDefault();
                        var result = tree.getCheckedNodes();
                        if (result != "") {
                            $.ajax({
                                type: "POST",
                                url: "/Hierarchy/DeleteNode",
                                data: { values: result.toString() },
                                dataType: "json",
                                success: function (data) {
                                    alert("Deleted successfully ");
                                    window.location.reload();
                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    alert('Error - ' + errorThrown);
                                },
                            });
                        }
                        else {
                            alert("Please select Node to delete..!!");
                        }


                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Error - ' + errorThrown);
                }
            });

            // show model popup to add new node in Tree
            $('#btnpopoverAddNode').click(function (e) {
                e.preventDefault();
                $("#modalAddNode").modal("show");
            });

            //Save data from PopUp
            $(document).on("click", "#savenode", function (event) {
                event.preventDefault();
                $.validator.unobtrusive.parse($('#formaddNode'));
                $('#formaddNode').validate();
                if ($('#formaddNode').valid()) {
                    var formdata = $('#formaddNode').serialize();
                    // alert(formdata);
                    $.ajax({
                        type: "POST",
                        url: "/Hierarchy/AddNewNode",
                        dataType: "json",
                        data: formdata,
                        success: function (response) {
                            // $("#modalAddNode").modal("hide");
                            window.location.reload();
                        },
                        error: function (response) {
                            alert('Exception found');
                            //  $("#modalAddNode").modal("hide");
                            window.location.reload();
                        },
                        complete: function () {
                            //  $('.ajax-loader').css("visibility", "hidden");
                        }
                    });
                }

            });

            //Close PopUp
            $(document).on("click", "#closePopup", function (e) {
                e.preventDefault();
                $("#modalAddNode").modal("hide");
            });

            $('.rbtnnodetype').click(function (e) {
                if ($(this).val() == "Pn") {
                    $('.petenddiv').attr("class", "petenddiv hidden");

                    $("#ParentName").val("");
                }
                else {
                    $('.petenddiv').attr("class", "petenddiv");
                }
            });

        });

    </script>

}

Answer 1

只需确保将属性命名为“文本”，包括小写字母，因为库会将此字段绑定(bind)到标签。没有具有此名称的属性会导致它未定义。