当没有可用记录时,如何防止 ajax 请求在页面大小更改时在服务器端进行?
How to prevent ajax request from going on server side on page size change when no records are available?
我正在使用 Kendo ui 网格:http://demos.telerik.com/kendo-ui/grid/index
我想在 "No records are available":
时阻止我的 ajax 请求在页面大小更改时在服务器端进行
来自 Jayesh Goyani 的回答我在 "no records are available" 时阻止了这样的排序:
$("#grid .k-grid-header .k-link").click(function (e) {
if ($("#grid").data("kendoGrid").dataSource.data().length == 0) {
e.stopPropagation();
}
});
那么如何在页面大小更改时做同样的事情?
注意:我正在为 kendo 使用 脚本 ui。
请尝试使用以下代码片段。据我所知,很难阻止 ajax 请求,因此当网格中不存在记录时,我已禁用页面大小下拉列表。
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />
<script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<script>
$(document).ready(function () {
products = null;
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
}
},
height: 550,
groupable: true,
sortable: true,
dataBound: onDataBound,
pageable: {
refresh: true,
pageSizes: true
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" }
]
});
$("#grid .k-grid-header .k-link").click(function (e) {
if ($("#grid").data("kendoGrid").dataSource.data().length == 0) {
e.stopPropagation();
}
});
});
function onDataBound(arg) {
if ($("#grid").data("kendoGrid").dataSource.data().length == 0) {
$(".k-grid-pager .k-dropdown").find('select').data("kendoDropDownList").readonly();
}
else {
$(".k-grid-pager .k-dropdown").find('select').data("kendoDropDownList").readonly(false);
}
}
</script>
</body>
</html>
如有任何疑问,请告诉我。
我正在使用 Kendo ui 网格:http://demos.telerik.com/kendo-ui/grid/index
我想在 "No records are available":
时阻止我的 ajax 请求在页面大小更改时在服务器端进行来自 Jayesh Goyani 的回答我在 "no records are available" 时阻止了这样的排序:
$("#grid .k-grid-header .k-link").click(function (e) {
if ($("#grid").data("kendoGrid").dataSource.data().length == 0) {
e.stopPropagation();
}
});
那么如何在页面大小更改时做同样的事情?
注意:我正在为 kendo 使用 脚本 ui。
请尝试使用以下代码片段。据我所知,很难阻止 ajax 请求,因此当网格中不存在记录时,我已禁用页面大小下拉列表。
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />
<script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<script>
$(document).ready(function () {
products = null;
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
}
},
height: 550,
groupable: true,
sortable: true,
dataBound: onDataBound,
pageable: {
refresh: true,
pageSizes: true
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" }
]
});
$("#grid .k-grid-header .k-link").click(function (e) {
if ($("#grid").data("kendoGrid").dataSource.data().length == 0) {
e.stopPropagation();
}
});
});
function onDataBound(arg) {
if ($("#grid").data("kendoGrid").dataSource.data().length == 0) {
$(".k-grid-pager .k-dropdown").find('select').data("kendoDropDownList").readonly();
}
else {
$(".k-grid-pager .k-dropdown").find('select').data("kendoDropDownList").readonly(false);
}
}
</script>
</body>
</html>
如有任何疑问,请告诉我。