如何在带有 AngularJS 的剑道网格列模板中使用 function

Question

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

查看文档后，似乎很简单：我可以将模板选项添加到我的列中，定义 function 来执行我的逻辑，然后传入 dataItem 值。我看起来像这样：

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

但是，运行此程序会导致语法错误，抱怨 forms 在我的 function 中打开块的字符“{”。

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

谢谢您的帮助。

Answer 1

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

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

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

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

Answer 2

警告：目前无权使用 Kendo 来测试代码，但这应该非常接近

在您的情况下，您将 aa 字符串分配给 k-columns 的值，该字符串包含单词function和您的花括号{

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

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

注意区别：

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

Answer 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>

Answer 4

经过数小时的搜索。 这是有效的结论：将您的网格数据作为 {{dataItem.masterNoteId}} 访问，将您的 $scope 数据作为简单的属性名称或函数访问。

例子

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

我真的希望这可以保护某人的生命:)

Answer 5

这可以通过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 的 columns.template 参考页面上提供了更多信息。

Answer 6

就像我的例子一样使用：

}, {
                field: "TrackingNumber",
                title: "@T("Admin.Orders.Shipments.TrackingNumber")",
                //template: '<a class="k-link" href="@Url.Content("~/Admin/Shipment/ShipmentDetails/")#=Id#">#=kendo.htmlEncode(TrackingNumber)#</a>'
            }, {
                field: "ShippingMethodName",
                title: "@T("Admin.Orders.Shipments.ShippingMethodName")",
                    template:function(dataItem) {
                        var template;
                        var ShippingMethodPluginName = dataItem.ShippingMethodPluginName;
                        var IsReferanceActive = dataItem.IsReferanceActive;
                        var ShippingMethodName = dataItem.ShippingMethodName;
                        var CargoReferanceNo = dataItem.CargoReferanceNo;
                        var ShipmentStatusId = dataItem.ShipmentStatusId;
                        if (ShipmentStatusId == 7) {
                            return "<div align='center'><label class='label-control'><b style='color:red'>Sipariş İptal Edildi<b></label></div>";
                        } else {
                            if (ShippingMethodPluginName == "Shipping.ArasCargo" || ShippingMethodPluginName == "Shipping.ArasCargoMP") {
                                template =
                                    "<div align='center'><img src = '/content/images/aras-kargo-logo.png' width = '80' height = '40'/> <label class='label-control'><b>Delopi Aras Kargo Kodu<b></label>";
                                if (IsReferanceActive) {
                                    template =
                                        template +
                                        "<label class='label-control'><b style='color:red; font-size:20px'>"+CargoReferanceNo+"<b></label></div>"; 
                                }
                                return template;
                            }