Typescript Kendo UI网格列类型错误

Typescript Kendo UI grid column type error

本文关键字：类型 错误 网格 Kendo UI Typescript      更新时间：2023-09-26

我在项目中使用Typescript时遇到Kendo UI问题。我有一个网格，它的过滤模式对某些列类型不起作用，比如integer。我试图直接在列中添加类型，但根本不起作用。它也没有过滤链接。

[EDIT]这是我创建网格的函数代码：

private _createInfoGridOptions(): kendo.ui.GridOptions {
    return {
        dataSource: {
            serverPaging: true,
            serverSorting: true,
            pageSize: 15,
        },
        resizable: true,
        selectable: 'row',
        filterable: true,
        columnMenu: true,
        sortable: true,
        scrollable: {
            virtual: true
        },
        groupable: true,
        height: 450,
        columns: [
            { field: 'subTaskId', type: "number", title: 'Subtask Id', width: '80px' },
            { field: 'reportDate', type:"date", title: 'Report Date', width: '100px', template: '#= moment.utc(reportDate).local().format("yyyy/mm/dd") #' },
            { field: 'prog', type: "string", title: 'prog',  width: '60px', template: "<a href='''#' ng-click='"openpopup(#=prog#, ''#=reportDate#'''')'">#=prog#</a>" },
            { field: 'state', type:"string", title: 'status', width: '130px' },
            { field: 'maxTemps', type: 'number', title: 'Max Temps', width: '100px' }                    
        ]
    };
}

我在Chrome上有这个错误：

未捕获的类型错误：（d.prog||"）.toLowerCase不是函数

火狐上的这个：

TypeError:".toLowerCase不是函数。

我做了一个plunker来测试用javascript翻译的代码，但type属性有效。

$("#grid").kendoGrid({
  dataSource: 
  {
       data : [
            {id: 36308,reportDate:"2015-02-01",prog: 58,state: "Waiting",maxTemps: 0}, 
            {id: 36309,reportDate:"2015-02-01",prog: 34,state: "Complete",maxTemps: 86400},
            {id: 36310,reportDate:"2015-02-01",prog: 116,state: "Complete",maxTemps: 86400},
            {id: 36311,reportDate:"2015-02-02",prog: 58,state: "Complete",maxTemps: 86400}
       ],
       serverPaging: true,
       serverSorting: true,
       pageSize: 15
  },
  filterable: true,
  columnMenu: true,
  columns: [
    { field: 'id', type:'number', title: 'Id', width: '80px' },
    { field: 'reportDate', title: 'Report Date', width: '100px' },
    { field: 'prog', type:'number', title: 'Prog', width: '60px' },
    { field: 'state', title: 'Status', width: '130px' },
    { field: 'maxTemps', type:'number', title: 'Max Temps', width: '100px' }
  ]
});

所以它在Javascript中工作，但在Typescript中不工作，我在Kendo UI中使用AngularJS。有什么想法为什么它不令人惊叹吗？

谢谢！

金屋

所以它在Javascript中工作，但在Typescript 中不工作

您共享的typescript与您共享的JavaScript不同。具体地说，dataSource有很大不同。我会使TS类似于JS，这应该会修复错误。

试试这个解决方案Plunker，

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.default.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css">
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
</head>
<body>
  <div id="grid"></div>
  <script>
    $(document).ready(function() {
      var data = [{
        id: 36308,
        reportDate: new Date("2015/02/01"),
        prog: 58,
        state: "Waiting",
        maxTemps: 0
      }, {
        id: 36309,
        reportDate: new Date("2015/02/01"),
        prog: 34,
        state: "Complete",
        maxTemps: 86400
      }, {
        id: 36310,
        reportDate: new Date("2015/02/01"),
        prog: 116,
        state: "Complete",
        maxTemps: 86400
      }, {
        id: 36311,
        reportDate: new Date("2015/02/02"),
        prog: 58,
        state: "Complete",
        maxTemps: 86400
      }];
      $("#grid").kendoGrid({
        dataSource: {
          data: data,
          schema: {
            model: {
              fields: {
                prog: {
                  type: "number"
                },
                reportDate: {
                  type: "date"
                }
              }
            }
          }
        },
        scrollable: true,
        columnMenu: true,
        filterable: {
          extra: false,
          operators: {
            string: {
              startswith: "Starts with",
              eq: "Is equal to",
              neq: "Is not equal to"
            }
          }
        },
        columns: [{
          field: 'id',
          type: 'number',
          title: 'Id',
          width: '80px'
        }, {
          field: 'reportDate',
          title: 'Report Date',
          width: '100px',
          format: "{0:yyyy/MM/dd}",
          filterable: {
            ui: "datepicker"
          }
        }, {
          field: 'prog',
          title: 'Prog',
          width: '60px',
          template: '<a href="''#" onclick ="''alert(#=prog#)">#= prog #</a>'
        }, {
          field: 'state',
          title: 'Status',
          width: '130px'
        }, {
          field: 'maxTemps',
          type: 'number',
          title: 'Max Temps',
          width: '100px'
        }]
      });
    });
  </script>
</body>
</html>

相关文章：