Question

今天我正在尝试在我的网站上实现一个kendo gridview，实际上我正在使用一个给我一个JSON结果的web服务。这是结果：

[{"IdComponente":"8","NoParte":"12","Descripcion":"Componente A","CostoUnitario":"0.12"},{"IdComponente":"9","NoParte":"123","Descripcion":"Componente B","CostoUnitario":"0.23"},{"IdComponente":"10","NoParte":"1234","Descripcion":"Componente C","CostoUnitario":"0.54"},{"IdComponente":"11","NoParte":"12345","Descripcion":"Componente D","CostoUnitario":"0.90"},{"IdComponente":"12","NoParte":"123456","Descripcion":"Componente E","CostoUnitario":"1.25"},{"IdComponente":"13","NoParte":"1234567","Descripcion":"Componente F","CostoUnitario":"0.12"},{"IdComponente":"14","NoParte":"12345678","Descripcion":"Componente G","CostoUnitario":"0.12"},{"IdComponente":"16","NoParte":"123456789","Descripcion":"Componente H","CostoUnitario":"0.98"}]

我正在使用这个脚本，问题是我在控制台中没有出现任何错误，但它没有向我显示网格中的信息。所以，我不知道为什么，因为json结果没问题。

    <script>
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "WSComponentes.asmx/obtenerComponentes",
            data: '',
            contentType: "application/json; charset=utf-8",
            dataType: "json", // dataType is json format
            success: function OnSuccess(response) {
                cargarGrid(response);
            },
            error: function onError(error) {
                console.log(error.d);
            },
        });
    });

    function cargarGrid(datos) {
        console.log(datos);
        $("#grid").kendoGrid({
            dataSource: {
                dataType: 'json',
                data: datos,
                schema: {
                    data: "d",
                    type: "json",
                    model: {
                        fields: {
                            IdComponente: { editable: false, type: "string" },
                            NoParte: { editable: false, type: "string" },
                            Descripcion: { editable: false, type: "string" },
                            CostoUnitario: { editable: false, type: "string" }
                        }
                    }
                },
                pageSize: 10
            },
            height: 550,
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "IdComponente",
                title: "IdComponente",
            }, {
                field: "NoParte",
                title: "NoParte"
            }, {
                field: "Descripcion",
                title: "Descripcion"
            }, {
                field: "CostoUnitario",
                title: "CostoUnitario",
            }
            ]
        });
    }
</script>

Answer 1

你离你所拥有的东西并不遥远......你需要声明一个kendo.data.DataSource：

var dataSource = new kendo.data.DataSource({
    dataType: 'json',
    data: datos,
    schema: {                                            
      model: {
        fields: {
          IdComponente: { editable: false, type: "string" },
          NoParte: { editable: false, type: "string" },
          Descripcion: { editable: false, type: "string" },
          CostoUnitario: { editable: false, type: "string" }
        }
      }
    },
    pageSize: 10
});

然后在网格声明中使用它，如下所示：

$("#grid").kendoGrid({
    dataSource: dataSource, ....

这是一个Dojo example，用于演示所需的实施更改。

如何将JSON数据传递给KendoUI Grid

1 个答案: