这是我正在使用的 HTML 页面,它无法正常工作。问题出在哪里,任何人都可以检查一次。
在过滤网格后,下拉值也会发生变化或过滤。
任何人都可以在 html 页面中检查此代码。
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.aspnetmvc.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<span class="nwcselection">data</span>
<input id="ddl"/></div>
<input type="button" id="btnfilter" value="Filter" onclick="Filter()" />
<div id="grid"></div>
</div>
<script type="text/javascript">
var data =new kendo.data.DataSource({
type: "odata",
transport: {
read:
"http://demos.kendoui.com/service/Northwind.svc/Products",
},
});
function createGrid()
{
var grid= $("#grid").kendoGrid({
dataSource:data,
schema: {
model: {
fields: {
ProductID: { type: "number" },
UnitPrice: { type: "number" },
ProductName: { type: "string" },
} }},
pageable: true,
columns: [
{ field: "ProductID", title:"Product ID", width:100 },
{ field: "ProductName", title:"Product Name" },
{ field: "UnitPrice", title:"Unit Price", width: 100 } ]
});
}
function dd()
{
$("#ddl").kendoDropDownList({
dataSource: data,
optionLabel: "Select category...",
dataTextField: "ProductName",
dataValueField: "ProductName"
}).data("kendoDropDownList");
}
function Filter() {
$("#btnfilter").click(function () {
$filter = new Array();
$ProductName = $("#ddl").data("kendoDropDownList").value();
if($ProductName)
{
$filter.push({ field: "ProductName",
operator: "contains", value: $ProductName });
}
var grid = $("#grid").data("kendoGrid");
grid.dataSource.filter({
logic: "and",
filters: $filter
});
});
}
$(document).ready(function () {
createGrid();
Filter();
dd();
});
</script>
</body>