Typescript Kendo UI 网格列类型错误答案

【问题标题】：Typescript Kendo UI grid column type errorTypescript Kendo UI 网格列类型错误
【发布时间】：2015-03-31 18:16:35
【问题描述】：

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

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

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 上遇到此错误：

未捕获的 TypeError: (d.prog || "").toLowerCase 不是函数

还有这个在 Firefox 上：

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。任何想法为什么它不醒来？

谢谢！

金乌

【问题讨论】：

你添加定义了吗？
定义？如果您在谈论 DefinetelyTyped 脚本，是的，我将它们添加到我的项目中。
datasource里面生成的数据是从哪里来的？你没有提到任何read URL
对不起，我在Javascript Plunker中放了一个例子，数据是从另一个函数收费的。 div 看起来像这样：<div id="resultSubTasksGrid" kendo-grid="resultGrid" class="table table-striped table-hover" k-options="infoGridOptions" k-data-source="source"></div> 数据来自对象源。

标签： javascript angularjs kendo-ui typescript kendo-grid

【解决方案1】：

所以它可以在 Javascript 中运行，但不能在 Typescript 中运行

您共享的打字稿与您共享的 JavaScript 不同。特别是dataSource 有很大的不同。我会让 TS 类似于 JS 并且应该修复错误。

【讨论】：

酷。但是dataSource两者还是有区别的
它不会改变过滤器的任何内容。我编辑了 Plunker 和我的帖子。

【解决方案2】：

试试这个解决方案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>

【讨论】：

感谢您的帮助，您的代码比我的更干净，但它对我不起作用。我不知道为什么，因为您和我的 plunker 工作正常。
你还在收到 TypeError 吗？
确保您的 kendo-grid 读取 URL 响应对象类型和您的 kendo-grid 列字段具有相同的 DataType。
同类型。 id、prog、reportDate 或 maxTemps 的 int 或 DateTime。我真的不明白为什么这在我的网格中不起作用。