我必须在页面上放置一个 kendochart 和一个 kendo 网格,它们与不同的数据源(即来自 sql 数据库的表)绑定。我需要在单击 kendochart 时更新 kendogrid 以获取不同的部分。假设 kendochart 为用户 A、B、C、D、E、F 显示 5 个部分,然后单击任何部分说 B 将为用户 B 更新 kendo 网格。请建议如何在 html 中实现此功能。
问问题
86 次
1 回答
1
请尝试使用以下代码片段。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script type="text/javascript">
var data = [
{
"source": "Hydro",
"percentage": 22
},
{
"source": "Solar",
"percentage": 2
},
{
"source": "Nuclear",
"percentage": 49
},
{
"source": "Wind",
"percentage": 27
}
];
var gridData = null;
$(document).ready(function () {
$("#chart").kendoChart({
title: {
text: "Break-up of Spain Electricity Production for 2008"
},
legend: {
position: "bottom"
},
dataSource: {
data: data
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode"
}],
seriesColors: ["#42a7ff", "#666666", "#999999", "#cccccc"],
tooltip: {
visible: true,
template: "${ category } - ${ value }%"
},
seriesClick: function (e) {
gridData = getDummyData(e.category);
bindGrid();
}
});
});
function getDummyData(catval) {
var dataG = [
{
"ID": 1,
"Name": catval
},
{
"ID": 2,
"Name": catval
}
];
return dataG
}
function bindGrid() {
$("#grid").kendoGrid({
dataSource: {
data: gridData,
schema: {
model: {
fields: {
ID: { type: "number" },
Name: { type: "string" }
}
}
},
pageSize: 1
},
height: 430,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
"ID",
{ field: "Name" }
]
});
}
</script>
</head>
<body>
<div>
<div id="chart">
</div>
<div id="grid">
</div>
</div>
</body>
</html>
于 2014-04-18T05:26:02.767 回答