kendoui在加载json数据时的奇怪行为

时间:2013-05-21 17:52:13

标签: grid kendo-ui datasource

我正在尝试使用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

与上面的主要源代码相同。

0 个答案:

没有答案