jQuery DevExtreme 数据网格：未捕获的类型错误：$(...).dxDataGrid 不是函数答案

【问题标题】：jQuery DevExtreme datagrid : Uncaught TypeError: $(...).dxDataGrid is not a functionjQuery DevExtreme 数据网格：未捕获的类型错误：$(...).dxDataGrid 不是函数
【发布时间】：2020-03-23 11:00:34
【问题描述】：

我在使用 ASP.NET MVC 的 DevExtreme DataGrid 方面遇到问题。

我已经下载了 NuGet 包，在 head 部分添加了脚本，但仍然有我的错误：

未捕获的类型错误：$(...).dxDataGrid 不是函数。

之前有什么脚本可以放吗？我刚刚完成了DevExtreme documentation 所说的操作。

这是我的代码。

头：

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-3.4.1.min.js"></script>

    <!-- DevExtreme themes -->
    <link rel="stylesheet" href="~/Content/dx.common.css">
    <link rel="stylesheet" href="~/Content/dx.light.css">

    <!-- DevExtreme library -->
    <script type="text/javascript" src="~/Scripts/dx.all.js"></script>
    <!-- <script type="text/javascript" src="js/dx.web.js"></script> -->
    <!-- <script type="text/javascript" src="js/dx.viz.js"></script> -->
    <!-- <script type="text/javascript" src="js/dx.viz-web.js"></script> -->
</head>

HTML：

<div class="panel panel-default">
    <div class="panel-heading">Output</div>
    <div class="panel-body">
        <div class="row">
            <div class="col-lg-12">
                <div id="gridContainer"></div>
            </div>
        </div>
    </div>
</div>

Javascript：

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnsubmit").on("click", function () {
            console.log($("#txtTitre").val());
            console.log($("#txtPlot").val());

            if ($("#txtTitre").val() === "" && $("#txtPlot").val() === "") {
                alert("Provide Details to Search !");
            }
            else {
                var obj = {};
                obj.titre = $.trim($("#txtTitre").val());
                obj.plot = $.trim($("#txtPlot").val());

                var apiUrl = "@Url.Action("DataSearch", "AllSearch")";

                $.ajax({
                    type: "POST",
                    contentType: 'application/json',
                    url: apiUrl,
                    dataType: "json",
                    data: JSON.stringify(obj),
                    crossDomain: true,
                    success: function (data) {
                        var response = data;
                        console.log(data);
                        if (data.datasend.length <= 0) {
                            alert("No Data Found!!");
                        } else {

                            var timetook = data.Took;
                            $('div.total-title').text(timetook + " millisecond");

                            $("#gridContainer").dxDataGrid({
                                dataSource: data.datasend,
                                showColumnLines: false,
                                showRowLines: true,
                                rowAlternationEnabled: true,
                                showBorders: true,
                                paging: {
                                    pageSize: 50
                                },
                                scrolling: {
                                    mode: "infinite" // or "virtual" | "infinite"
                                },
                                pager: {
                                    showPageSizeSelector: false,
                                    allowedPageSizes: [5, 10, 20],
                                    showInfo: true
                                },
                                columns: [
                                    {
                                        caption: "Titre",
                                        width: 350,
                                        fixed: true,
                                        dataField: "titre"
                                    },
                                    {
                                        caption: "Plot",
                                        width: 300,
                                        fixed: true,
                                        dataField: "plot"
                                    },
                                     "MaritalStatus",
                                     "Gender",
                                     "SalariedFlag",
                                     "VacationHours",
                                     "SickLeaveHours",
                                     "CurrentFlag"
                                ]
                            });
                        }
                    },
                    error: function (xhr, err) {
                        alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
                        alert("responseText: " + xhr.responseText);
                    }
                });
            }
        });
    });
</script>

非常感谢您的回答。

【问题讨论】：

您是否检查过dx.all.js 是否被正确加载？也许路径是错误的什么的。

标签： jquery html asp.net-mvc devextreme

【解决方案1】：

根据example，您的设置看起来没问题。似乎从您的服务器获取 dx.all.js 库或在加载所需的库之前运行您的 javascript 代码可能存在问题！尝试首先使用浏览器的开发工具检查这些可能的原因。查看控制台/网络选项卡或在相关行设置断点，重新加载并调试代码以查看库是否真的在所需点加载。

【讨论】：

这更多的是调试建议列表，而不是实际解决方案。一旦您拥有 50 名声望，您就可以在问题下发布 cmets - 您在此处写的内容更适合作为评论，因为它不会直接回答问题。