时间戳

首页 > 解决方案 > 剑道网格不会从 API 请求中填充

javascript - 剑道网格不会从 API 请求中填充

问题描述

我正在使用剑道 UI，特别是剑道网格和剑道数据源。

我正在从本地 API 获取数据。数据正在正确检索（在邮递员中检查）。我将此获取结果的结果保存（或尝试保存）在剑道数据源中。

然后我在创建网格时将此数据源作为参数传递。不幸的是，网格没有显示任何结果......

这是代码：

<script>
        var inputLe = localStorage.getItem("storageLe");


        $(document).ready(function () {
            var gridDataSource = new kendo.data.DataSource({
            transport: {
                read:{
                    url: "http://localhost:3000/api/reg",
                    dataType: "jsonp",
                    type: "GET",
                }
            },
            schema:{
                //data: "data",
                model:{
                   // id: "id",
                    fields:{
                        id: { type: "number" },
                        Number: { type: "string" },
                        Date: { type: "date" },
                        Amout: { type: "number" },
                        Net: { type: "number" },
                        Category: { type: "string" },
                        Commen: { type: "string" },
                        Entity: { type: "string" },
                        Quart: { type: "string" },
                        Confirmed: { type: "boolean" },
                        Stat: { type: "boolean" }
                    }
                    }
            },
            //serverFiltering : true,
                   //filter : [
                       // {field: "Legal_Entity", operator: "eq", value: "3800" },
                //]
              
            });
      

            $("#grid").kendoGrid({
                dataSource: gridDataSource,
                height: 700,
                editable: "incell",
                groupable: true,
                sortable: true,
                toolbar: ["excel", "pdf", "search",{name:'new', text:'Create Comment', iconClass:"k-icon k-i-plus"}],
                dataBound: onDataBound,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [
                {
                    field: "Number",
                    title: "Number"
                }, {
                    field: "Date",
                    title: "Date",
                    format: "{0:dd/MM/yyyy}"
                }, {
                    field: "Amout",
                    title: "Amount"
                }, {
                    field: "Net",
                    title: "Net"
                }, {
                    field: "Category",
                    title: "Category"
                }, {
                    field: "Commen",
                    title: "Comment",                     
                    width: 300
                }, {
                    field: "Entity",
                    title: "Entity"
                }, {
                    field: "Quart",
                    title: "Quarter"
                }, {
                    field: "Confirmed",
                    title: "Confirmed",
                }, {
                    field: "Stat",
                    title: "Status",
                 
                }

               
                ]
            });
            
        });
        
        window.localStorage.removeItem("storageLe");

        //edit to fetch in the comment drodown the categories
        function clinetCategoryEditor(container, options) {
        $('<input required name="Commen">')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataTextField: "CategoryName",
                dataValueField: "CategoryID",
                dataSource: {
                    data: categories
                }
            });
    }
        //function that set the boolean status of Stat and show matched or unmatched with colors
        function onDataBound(e){
            var grid = this;
            grid.table.find("tr").each(function(){
                var dataItem = grid.dataItem(this);
                var themeColor = dataItem.Stat ? 'success' : 'error';
                var text = dataItem.Stat ? 'Matched' : 'Unmatched';

                $(this).find(".badgeTemplate").kendoBadge({
                themeColor: themeColor,
                text: text,
            });
                
            });
        }
        
    </script>
<!DOCTYPE html>
<html>
<head>
    <title>Grid</title>
    <link rel="stylesheet" href="styles/kendo.common.min.css">
    <link rel="stylesheet" href="styles/kendo.default.min.css">
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css">
    <link rel="stylesheet" href="styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="styles/kendo.silver.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="js/pako_deflate.min.js"></script>
    <script src="js/jszip.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/daterangepicker.css">
   
</head>
<body>
    <div>
        <p>
           <h1>Some</h1> 
        </p>
    </div>
    
    <div id="container">
        <div id="grid"></div>
     </div>

这是从 API 返回的示例 json：

{ "id": 512, "Number": "00000", "Date": "2000-05-01T03:00:00.000Z", "Amout": -999.99, "Net": 0, "Category": " 00”，“Commen”：“一些评论”，“Entity”：“1234”，“Quart”：“2”，“Confirmed”：1，“Stat”：1 }

提前致谢。

Edit1：将所有功能放在代码片段上。

Edit2：控制台和网络选项卡的打印屏幕。

Edit3：新的打印屏幕使用 json 而不是 jsonp（CORS 错误）

从 API 返回 200 的网络屏幕

控制台打印屏幕没有错误（只有这个警告）

json 而不是 jsonp - CORS 错误

标签： javascriptjquerykendo-uikendo-gridkendo-datasource

解决方案

这是一个根据您的示例填充数据的网格示例。根据我的评论“你试过了吗data:[...]”，你回答说没有数据。在此示例中，网格显示数据。这意味着问题不在于您的网格。它必须在transport. 您的 localhost api 是否返回一个数组？由于您的示例代码不清楚并且不是最低可重现的工作示例，我希望下面的示例将帮助您查明您的问题。在 Telerik DOJO 或您喜欢的任何地方尝试一下。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>    
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid"></div>

    <script>
        $(document).ready(function () {
            var gridDataSource = new kendo.data.DataSource({
                data: [{ "id": 512, "Number": "00000", "Date": "2000-05-01T03:00:00.000Z", "Amout": -999.99, "Net": 0, "Category": "00", "Commen": "Some comment", "Entity": "1234", "Quart": "2", "Confirmed": 1, "Stat": 1 } ],
            });
            
            $("#grid").kendoGrid({
                dataSource: gridDataSource,
                height: 700,
                editable: "incell",
                groupable: true,
                sortable: true,
                toolbar: ["excel", "pdf", "search",{name:'new', text:'Create Comment', iconClass:"k-icon k-i-plus"}],
                //dataBound: onDataBound,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [
                {
                    field: "Number",
                    title: "Number"
                }, {
                    field: "Date",
                    title: "Date",
                    format: "{0:dd/MM/yyyy}"
                }, {
                    field: "Amout",
                    title: "Amount"
                }, {
                    field: "Net",
                    title: "Net"
                }, {
                    field: "Category",
                    title: "Category"
                }, {
                    field: "Commen",
                    title: "Comment",                     
                    width: 300
                }, {
                    field: "Entity",
                    title: "Entity"
                }, {
                    field: "Quart",
                    title: "Quarter"
                }, {
                    field: "Confirmed",
                    title: "Confirmed",
                }, {
                    field: "Stat",
                    title: "Status",
                }]
            });
        });
    </script>
    <style>
    </style>
</div>

</body>
</html>

推荐阅读