我正在尝试使用kendoui网格,我在加载数据时遇到了这种奇怪的行为:
1)在我使用的所有源代码之前:
<html>
<head>
<title>VIC</title>
<link href="/ittrad-catprod-portlet/css/kendoui/kendo.common.min.css" rel="stylesheet" />
<link href="/ittrad-catprod-portlet/css/kendoui/kendo.default.min.css" rel="stylesheet" />
<script src="/ittrad-catprod-portlet/js/kendoui/jquery.min.js"></script>
<script src="/ittrad-catprod-portlet/js/kendoui/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 150px"/>
</div>
</script>
<script>
var itemsCateg = [{ DataInc: "10.03.2013", DataIncValue: "10.03.2013" }, { DataInc: "11.05.2013", DataIncValue: "11.05.2013" }];
var itemsProd = [{"catId":1,"categorie":"MASINA SPALAT","cod_produs":"AAAAA","data_inc":"10.03.2013","data_sf":"20.05.2014","multiplicator":111,"orgid":1,"punctaj":100},
{"catId":2,"categorie":"MASIAN CALCAT","cod_produs":"BBBBB","data_inc":"10.03.2013","data_sf":"21.05.2014","multiplicator":111,"orgid":1,"punctaj":200},
{"catId":3,"categorie":"APARAT 1","cod_produs":"CCCCC","data_inc":"11.05.2013","data_sf":"12.06.2014","multiplicator":222,"orgid":1,"punctaj":300}];
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "/itrad-catprod-portlet/api/jsonws/vcatalogprodvanztablecontent/get-cat-prod"
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
toolbar: kendo.template($("#template").html()),
height: 320,
sortable: true,
pageable: {
pageSize: 5
},
columns: [
{ field: "catId", title: "Product ID", width: 100 },
{ field: "categorie", title: "Product Name" },
{ field: "data_inc", title: "Unit Price", width: 100 },
{ field: "punctaj", title: "Quantity Per Unit" }
]
});
var dropDown = grid.find("#category").kendoDropDownList({
dataTextField: "DataInc",
dataValueField: "DataIncValue",
autoBind: false,
optionLabel: "All",
dataSource: itemsCateg,
change: function() {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "data_inc", operator: "eq", value: value });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
});
</script>
<style scoped="scoped">
#grid .k-toolbar
{
min-height: 27px;
padding: 1.3em;
}
.category-label
{
vertical-align: middle;
padding-right: .5em;
}
#category
{
vertical-align: middle;
}
.toolbar {
float: right;
}
</style>
</div>
</body>
</html>
我得到一个错误的结果意味着用452研磨!! ??空行。 浏览器没有错误!
代替数据源上方的代码
dataSource: {
type: "json",
transport: {
read: "/itrad-catprod-portlet/api/jsonws/vcatalogprodvanztablecontent/get-cat-prod"
},
使用:
dataSource: itemsProd,
结果是OK意味着我看到3行和分页,一切都OK。
问题是为什么这种来自网格的奇怪行为会产生两种不同的反应 对于同一个json,即:
[{"catId":1,"categorie":"MASINA SPALAT","cod_produs":"AAAAA","data_inc":"10.03.2013","data_sf":"20.05.2014","multiplicator":111,"orgid":1,"punctaj":100},{"catId":2,"categorie":"MASIAN CALCAT","cod_produs":"BBBBB","data_inc":"10.03.2013","data_sf":"21.05.2014","multiplicator":111,"orgid":1,"punctaj":200},{"catId":3,"categorie":"APARAT 1","cod_produs":"CCCCC","data_inc":"11.05.2013","data_sf":"12.06.2014","multiplicator":222,"orgid":1,"punctaj":300}]
请注意变量
var itemsProd = [{"catId":1,"categorie":"MASINA SPALAT","cod_produs":"AAAAA","data_inc":"10.03.2013","data_sf":"20.05.2014","multiplicator":111,"orgid":1,"punctaj":100},
{"catId":2,"categorie":"MASIAN CALCAT","cod_produs":"BBBBB","data_inc":"10.03.2013","data_sf":"21.05.2014","multiplicator":111,"orgid":1,"punctaj":200},
{"catId":3,"categorie":"APARAT 1","cod_produs":"CCCCC","data_inc":"11.05.2013","data_sf":"12.06.2014","multiplicator":222,"orgid":1,"punctaj":300}];
下面是生成启动链接
http://localhost:8080/ittrad-catprod-portlet/api/jsonws/vcatalogprodvanztablecontent/get-cat-prod
与上面的主要源代码相同。