如何使用 AngularJS 在 Kendo Grid Column Template 中使用函数

Posted 2023-05-07

【中文标题】如何使用 AngularJS 在 Kendo Grid Column Template 中使用函数

【英文标题】：How to use function in Kendo Grid Column Template with AngularJS

【发布时间】：2014-07-31 15:10:53

【问题描述】：

我在 Kendo 网格中有一个列，我想在渲染时执行一些特定的逻辑，并且正在使用 Angular。我使用 k-columns 指令设置了网格列。

在查看the documentation 之后，似乎很简单：我可以将模板选项添加到我的列中，定义执行我的逻辑的函数，并将 dataItem 值传入。我所拥有的看起来像这样：

k-columns='[ field: "Name", title: "Name", 
    template: function (dataItem)
        // Perform logic on value with dataItem.Name
        // Return a string
    
]'

但是，运行它会导致语法错误，抱怨字符“”在我的函数中形成了块的开头。

我见过几个以这种格式定义模板函数的例子。是否需要做其他事情才能使其正常工作？我做错了什么吗？是否有另一种将模板定义为函数并将列数据传递给它的方法？ （我尝试在我的 $scope 上创建一个函数，但我无法弄清楚如何将数据传递给函数。）

感谢您的帮助。

【参考方案1】：

在使用 AngularJS 和 Kendo 时，似乎不支持以这种方式定义列模板。这种方法适用于不使用 Angular（标准 MVVM）的项目，但由于包含它而失败。

我的一位同事发现的解决方法是使用 ng-bind 构建模板，以在 $scope 上指定模板函数，全部在 span 内：

template: "<span ng-bind=templateFunction(dataItem.Name)>#: data.Name# </span>"

这是 Telerik 在其 Kendo-Angular 源代码中实现的默认列模板方法。我还不知道是否需要 data.Name 值，但这对我们有用。

【讨论】：

有一个更简单的解决方法 - 只需访问范围并使用 dataItem 就像 template: "<span> dataItem.Name </span>", 一样

@jajdoo - 您的示例中自定义函数在哪里运行？

【参考方案2】：

警告：目前无法访问 Kendo 来测试代码，但这应该非常接近

在您的情况下，您正在为 k-columns 的值分配一个字符串，并且该字符串包含单词 function 和大括号

你需要确保函数被执行......像这样：

k-columns=[
    
       field: "Name",
       title: "Name", 
       template: (function (dataItem)
        // Perform logic on value with dataItem.Name
        // Return a string
       ())
    
];

注意区别：

我们创建一个对象 -- 一个真正诚实的对象，我们使用 IIFE 来填充 template 属性。

【讨论】：

感谢您的意见。这是一个很好的主意，但它似乎不起作用：我得到了和以前一样的错误。我注意到几件事：A）函数调用括号应该在结束函数定义括号之后，B）我不确定为什么需要这种格式，因为 Telerik 的文档没有使用它。他们只是将模板本身定义为一个函数。

虽然情况有所好转，但我发现 Telerik 的文档经常......缺乏。 （并且调用括号的位置无关紧要，它只是一个偏好。(function() ()) 与 (function() )() 完全相同。

您正在调用一个函数，该函数需要一个参数 (dataItem) 而没有提供它。如果将模板指定为函数（函数定义后不带 ()），kendo 将为数据源中的每个项目调用此函数，并提供当前项目作为参数。

当您需要用于具有相同功能的多个列时，您不能使用您的功能。问题是哪一列在调用这个函数

模板函数回调不需要自己调用。 template: function(dataItem) /* do something with dataItem.Name */ 就足够了。

【参考方案3】：

也许，它对某人有用 - 这段代码也适用于我：

columns: [
  
    field: "processed",
    title:"Processed",
    width: "100px",
    template: '<input type="checkbox" ng-model="dataItem.processed" />'
  ,

你会得到这样的双向绑定：

<div class="col-md-2">
  <label class="checkbox-inline">
    <input type="checkbox" ng-model="vm.selectedInvoice.processed">
    processed
  </label>
</div>

【参考方案4】：

这可以通过columns.template 参数通过提供一个回调函数来完成，该函数的参数是一个代表行的对象。如果您为该行提供一个名为 name 的字段，这将是您引用的对象的属性：

$("#grid").kendoGrid(
  columns: [ 
    field: "name",
    title: "Name",
    template: function(data) 
        return data.name + "has my respect."
    
  ],
  dataSource: [  name: "Jane Doe" ,  name: "John Doe"  ]
);

更多信息请访问Kendo's columns.template reference page。

【参考方案5】：

经过数小时的搜索。这是有效的结论： 以 dataItem.masterNoteId 的形式访问您的网格数据，并以属性名称或函数的形式访问您的 $scope 数据。

例子

template: '<a href="\\#/ops/order/orderId/note/dataItem.masterNoteId"><i class="fa fa-edit"></i></a>',

我真的希望这能保护别人的生命:)