javascript - 如何将数据表集成到左栏 Web 部件中？

Question

我创建了这个 webpart ([https://www.broward.org/Legal/Pages/practiceTeams.aspx#Finance%20and%20Real%20Property)][1]，它基本上是一个左栏，当您单击左侧的任何项目。我启动了一些 JS 代码并将其连接到一个列表。现在它给了我这个Uncaught ReferenceError: topicsTitle is not defined

$(".searchableAccordion").append(
    '<section aria-label="Main Page Content" id="Career">' +
    '<div class="container py-3">' +
    '<div class="row justify-content-between">' +
    '<div class="col-md-3 col-12 pr-4">' +
    '<h4 class="pb-md-3 font-weight-bold text-center text-md-left text-dark">' +
    topicsTitle +
    "</h4>" +
    '<div id="topicNav" class="pb-md-3 py-md-0">' +
    '<ul class="px-0" id="topicOptions" style="list-style-type:none; border-left:solid medium #eaeaea;"><!--Options injected here--></ul>' +
    "</div>" +
    "</div>" +
    '<div class="col-md-8 col-12">' +
    '<div class="row justify-content-center justify-content-md-end my-2 searchBar">' +
    '<div class="col-md-6 col-10 pr-1"><div class="z-depth-1 mt-1" style="border-radius:4px;">' +
    '<input class="form-control pl-3" id="faqSearch" style="border-radius:4px;" type="text" placeholder="Search" aria-label="Search" data-search/>' +
    "</div>" +
    "</div>" +
    '<div class="col-2 d-flex pl-1 justify-content-end">' +
    '<button class="btn btn-sm px-4 d-flex justify-content-center" style="background-color:#039BE5; margin-top:4px; margin-bottom:16px" type="button" data-search-button>' +
    '<i class="fal fa-search" style="font-size:24px"></i>' +
    "</button>" +
    "</div>" +
    "</div>" +
    "<!-- Grid row -->" +
    '<div class="row d-flex justify-content-center">' +
    "<!-- Grid column -->" +
    //Inject Data Table Here
    '<div class="col-md-12 pb-5 mr-1" id="accordionColumn">' +
    '<div class="container tabsTableFade" id="tableToMove" style="opacity: 0">' +
    '<h5 style="font-size: 1.25rem;" id="title1"></h5>' +
    '<div class="row px-0">' +
    '<table id="rfaTable" class="table table-striped table-bordered table-responsive-md browardT mx-0" cellspacing="0" width="100%">' +
    '<thead id="tHeader">' +
    '<tr id="tHeaderRow"><th>Division </th><th>Name</th><th>Telephone</th><th>E-mail</th></tr>' +
    '</thead>' +
    '<tbody id="rowItems">Test</tbody>' +
    '</table>' +
    "</div>" +
    '</div>' +
    '</div>' +

    "<!-- Grid column -->" +
    "</div>" +
    "<!-- Grid row -->" +
    "</div>" +
    "</div>" +
    "</div>" +
    "</section>"
);
//var accID = title;
//console.log(accID);
var searchVal = "";

$(function() {
$.ajax({
        url: apiUrl,
        method: "GET",
        headers: {
            Accept: "application/json; odata=verbose",
        },
        success: function(data) {
            var thisFaqResults = data.d.results;
            var ordered = false;

            console.log(thisFaqResults);

            function onlyUnique(value, index, self) {
                return self.indexOf(value) === index;
            }

            var faqItems = $.each(thisFaqResults, function(ind, faqItems) {
                return faqItems;
            });

            var allTopics = [];
            for (i = 0; i < faqItems.length; i++) {
                var filterTopics = faqItems[i];
                allTopics.push(filterTopics.Title);
                if (faqItems[i].Order0 || faqItems[i].Order) {
                    ordered = true;
                }
            }
            if (ordered === false) {
                allTopics.sort();
                console.log("sorted");
            }

            //sorting can be done in url parameter if needed
            //allTopics.sort();
            var accID;
            var hash = window.location.hash;
            if (window.location.hash.length > 0) {
                for (var i = 0; i < allTopics.length; i++) {
                    console.log(decodeURIComponent(hash.split("#")[1]) == allTopics[i]);
                    if (decodeURIComponent(hash.split("#")[1]) == allTopics[i]) {
                        var accID = allTopics[i];
                    }
                }
            }
            if (window.location.hash.length <= 0) {
                var accID = allTopics[0];
            }

            console.log(accID);

            $(".searchBar").after(
                '<h2 id="faqTopicTitle" class="pb-3 font-weight-bold text-center text-md-left"></h2>'
            );

            var topicList = allTopics.filter(onlyUnique);

            for (i = 0; i < topicList.length; i++) {
                var topicName = topicList[i];
                $("#topicOptions").append(
                    '<li class="py-1 pl-3"><a href="#" class="text-dark" data-acc="' +
                    topicName +
                    '">' +
                    topicName +
                    "</a></li>"
                );
            }

            var effectIn = function() {
                $("#faqTopicTitle").html(accID).fadeTo(500, 1);
                return $("#accordionColumn").fadeTo(500, 1);
            };

            var effectOut = function() {
                $("#faqTopicTitle").fadeTo(500, 0);
                return $("#accordionColumn").fadeTo(500, 0);
            };
            //includes Polyfill
            if (!String.prototype.includes) {
                Object.defineProperty(String.prototype, "includes", {
                    value: function(search, start) {
                        if (typeof start !== "number") {
                            start = 0;
                        }

                        if (start + search.length > this.length) {
                            return false;
                        } else {
                            return this.indexOf(search, start) !== -1;
                        }
                    },
                });
            }

            function createAccordion() {
                var faqItems = $.each(thisFaqResults, function(ind, faqItems) {
                    return faqItems;
                });

                if (accID != "Search Results") {
                    var filterTopic = faqItems.filter(function(e) {
                        return e.Title == accID;
                    });
                } else {
                    var filterTopic = faqItems.filter(function(e) {
                        var questions = e.Description.toLowerCase();
                        return questions.includes(searchVal);
                    });
                }

                var tHeader = $('#tHeader')
                var rowItems = $('#rowItems')

                // Builds the Data Table
                var buildAcc = function() {
                    var accID2 = accID.toString().replace(/\s/g, "");
                    var accBuild =
                        '<div class="lraccordion" id="' +
                        accID2 +
                        '" role="tablist" aria-multiselectable="true"">' +

                        //Data Table Code
                        $('.table.browardT').DataTable({
                            searching: false,
                            lengthChange: false,
                            paging: false,
                            info: false
                        })

                    $('.dataTables_wrapper')
                        .find('label')
                        .each(function() {
                            $(this)
                                .parent()
                                .append($(this).children())
                        })

                    $('.dataTables_filter')
                        .find('input')
                        .each(function() {
                            $('input').attr('placeholder', 'Search')
                            $('input').removeClass('form-control-sm')
                        })

                    $('.dataTables_length').addClass('d-flex flex-row')
                    $('.dataTables_filter').addClass('md-form')
                    $('select').addClass('mdb-select')
                    $('.mdb-select').material_select()
                    $('.mdb-select').removeClass(
                        'form-control form-control-sm custom-select custom-select-sm'
                    )
                    $('.dataTables_filter')
                        .find('label')
                        .remove()

                    loaderGIF()
                    tabsTableFade()
                }
            })

        //End Data Table Code

        '</div>';
        $("#accordionColumn").append(accBuild);
    };

    buildAcc();

    var buildCards = function() {
        if (filterTopic.length !== 0 && window.location.hash.length <= 0) {
            for (i = 0; i < filterTopic.length; i++) {
                var accID2 = accID.toString().replace(/\s/g, "");
                var faqItems = filterTopic[i];
                var cardTitle = faqItems.Title;
                var leftRailCardBody = faqItems.Description;

                console.log(leftRailCardBody);

                var cardBuild = '<div id="benefitDetail">' + leftRailCardBody;

                $(".lraccordion").append(cardBuild);
            }
        } else if (
            filterTopic.length !== 0 &&
            window.location.hash.length > 0
        ) {
            for (i = 0; i < filterTopic.length; i++) {
                var accID2 = accID.toString().replace(/\s/g, "");
                var faqItems = filterTopic[i];
                var cardTitle = faqItems.Title;
                var leftRailCardBody = faqItems.Description;

                console.log(leftRailCardBody);

                var cardBuild = '<div id="benefitDetail">' + leftRailCardBody;

                $(".lraccordion").append(cardBuild);
            }
            var hash = window.location.hash;
            var topics = $("#topicOptions > li");

            for (var i = 0; i < topics.length; i++) {
                if (
                    decodeURIComponent(hash.split("#")[1]) == topics[i].innerText
                ) {
                    $(topics[i]).css({
                        borderLeft: "solid medium #039BE5",
                        marginLeft: "-3px",
                    });
                    $("#faqTopicTitle").html(
                        decodeURIComponent(hash.split("#")[1])
                    );
                }
            }
        } else if (filterTopic.length === 0) {
            var cardBuild =
                "<h4>There are no results matching your search.</div>";
            $(".lraccordion").append(cardBuild);
        }
    }; buildCards();
}
createAccordion();
if (window.location.hash.length > 0) {
    var hash = window.location.hash;
    var topics = $("#topicOptions > li");
    for (var i = 0; i < topics.length; i++) {
        if (decodeURIComponent(hash.split("#")[1]) == topics[i].innerText) {
            $(topics[i]).css({
                borderLeft: "solid medium #039BE5",
                marginLeft: "-3px",
            });
            $("#faqTopicTitle").html(decodeURIComponent(hash.split("#")[1]));
        } else {
            $(topics[i]).css({
                borderLeft: "none",
                marginLeft: "0px",
            });
        }
    }
} else {
    if (window.location.hash.length <= 0) {
        $("#faqTopicTitle").html(accID);
        $("#topicOptions > li:first-child").css({
            borderLeft: "solid medium #039BE5",
            marginLeft: "-3px",
        });
    }
}

$("#topicOptions > li > a").on("click", function() {
    event.returnValue = false;
    //accID = this.innerHTML;
    accID = $(this).data("acc");
    window.location.hash = "#" + accID;
    // console.log(accID);
    $("[data-search]")[0].value = "";
    $("#topicOptions > li").css({
        borderLeft: "none",
        marginLeft: "0px",
    });
    $(this).parent().css({
        borderLeft: "solid medium #039BE5",
        marginLeft: "-3px",
    });
    $.when(effectOut()).done(function() {
        $(".lraccordion").remove();
        createAccordion();
        effectIn();
        $('[data-toggle="popover-hover"]').popover();
    });
});

function topicNav() {
    // Create the dropdown base
    $(
        '<select style="border:none; height:50px;" class="browser-default custom-select w-100 z-depth-1" />'
    ).appendTo("#topicNav");
    // Create default option "Go to..."
    $("<option />", {
        selected: "",
        value: "Choose a Topic",
        text: "Choose a Topic",
    }).appendTo("#topicNav select");

    // Populate dropdown with menu items
    $("#topicNav > ul > li > a").each(function() {
        var topicsSelect = $(this);
        $("<option />", {
            value: topicsSelect.text(),
            text: topicsSelect.text(),
        }).appendTo("#topicNav select");
    });

    // To make dropdown actually work
    // To make more unobtrusive: https://css-tricks.com/4064-unobtrusive-page-changer/
    $("#topicNav select").change(function() {
        accID = $(this).find("option:selected").val();
        $.when(effectOut()).done(function() {
            $(".lraccordion").remove();
            createAccordion();
            effectIn();
        });
    });
}
topicNav();

//Search Function
$("[data-search]").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        event.returnValue = false;
        accID = "Search Results";
        console.log($(this));

        searchVal = $(this).val().toLowerCase();
        $.when(effectOut()).done(function() {
            $("#topicOptions > li").css({
                borderLeft: "none",
                marginLeft: "0px",
            });

            $(".lraccordion").remove();
            createAccordion();
            effectIn();
        });
        console.log(searchVal);
    }
});

$("[data-search-button]").on("click", function(event) {
    event.preventDefault();
    event.returnValue = false;
    accID = "Search Results";

    $("#topicOptions > li").css({
        borderLeft: "none",
        marginLeft: "0px",
    });

    searchVal = $("#faqSearch").val().toLowerCase();
    $.when(effectOut()).done(function() {
        $("#topicOptions > li").css({
            borderLeft: "none",
            marginLeft: "0px",
        });

        $(".lraccordion").remove();
        createAccordion();
        effectIn();
    });
    console.log(searchVal);
});
},
});
});

[1]：https ://www.broward.org/Legal/Pages/practiceTeams.aspx#Finance%20and%20Real%20Property ）

标签： javascriptsharepoint