我在使用ASP的DevExtreme DataGrid中遇到问题。NET MVC。
我已经下载了NuGet包，在头部分添加了脚本，但仍然有我的错误：
未捕获类型错误：$(…(.dxDataGrid不是函数。
之前有脚本吗？我刚刚完成了DevExtreme文档中所说的操作。
这是我的密码。
头部：
<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库时似乎有问题，或者在加载所需库之前运行javascript代码！请先使用浏览器的开发工具来检查这些可能的原因。查看控制台/网络选项卡或在增加的行中设置断点，重新加载并调试代码，看看库是否真的在需要的位置加载。