kendo-ui 网格列模板函数字段名

Question

我想知道，模板函数中的字段名称是什么，例如：

{ 
field: "country", 
template: function(e){
               var tmp  = "";
               var guid     = kendo.guid();
               $.each( e.country, function( key, value ) {
                  tmp += '<span class="xyz">' + value.text + '</span>';
               });
               return tmp;
          }, 
}

样本：Associative array in grid cell

我在模板中没有字段名称 "country"：function(e)。模板中的函数中只有字段数据。有没有一种方法，比如 kendo.guid()，我在函数中有字段名称 "country" 用于示例。

Answer 1

看看这是否满足您的需求：

{
    field: "country",
    title: "Country",
    template: function(e, field = "country") {
        console.log("Field name:", field);
        console.log(e[field]);
        return e.country.reduce((prev, current) => prev + '<span class="k-button" style="line-height:1.25em; cursor:default;">' + current.text + '</span>', "");
    },
}

您可以在代码段中查看如何使用它的示例。

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
    

</head>
<body>

<div id="example">
    <div id="grid"></div>
      <script id="noDataTemplate" type="text/x-kendo-tmpl">
        <div>
            No data found. Do you want to add new item - '#: instance.input.val() #' ?
        </div>
        <br />
        <button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.input.val() #')">Add new item</button>
    </script>
    <script>
        function getTemplate(e, fieldName) {
            if (fieldName === "country") {
               return e.country.reduce((prev, current) => prev + '<span class="k-button" style="line-height:1.25em; cursor:default;">' + current.text + '</span>', "");
            } else {
                return e[fieldName];
            }
        }
      
        $(document).ready(function () {
           var data = [
                      {
                        'id':'wpErpOs_1', 
                       'name': 'Rolf', 
                       'country': [{ 'text':'Schweiz','id':'1'}], 
                       'flag':false
                      }, {
                        'id':'wpErpOs_2', 
                       'name': 'Hans', 
                       'country': [
                                    { 'text':'Deutschland','id':'2'},
                                    { 'text':'Schweiz','id':'1'},
                               { 'text':'Österreich','id':'3'}
                                   ], 
                       'flag':false
                      }, {
                        'id':'wpErpOs_3', 
                       'name': 'Esther', 
                       'country': [{ 'text':'Schweiz','id':'1'}], 
                       'flag':false
                      }, {
                        'id':'wpErpOs_4', 
                       'name': 'Daniela', 
                       'country': [{ 'text':'Österreich','id':'3'}], 
                       'flag':false
                      }
                    ];
          
           var dataSource = new kendo.data.DataSource({
                            transport: {
                                read:  function(e){
                                   e.success(data); 
                                },
                                update:function(e){
                                   e.success(); 
                                },
                                destroy: function(e){
                                   e.success(); 
                                },
                                create: function(e){
                                   e.success(); 
                                },
                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                }
                            },
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "id",
                                    fields: {
                                        id: { editable: false, nullable: true },
                                        name: { validation: { required: true } },
                                        country: { type: "object" },
                                        flag: { type: "boolean" }
                                    }
                                }
                            }
                        });

          
            $("#grid").kendoGrid({
                dataSource: dataSource,
               toolbar: ["create"],
                columns: [
                  {
                    field: "name",
                    title: "Name",
                    template: function(e) {return getTemplate(e, "name");}
                }, {
                    field: "country",
                    title: "Country",
                   template: function(e) {return getTemplate(e, "country");}
                }, {
                    field: "flag",
                    title: "Flag",
                   editor: wpErpOs_GridBoolean,
                   template: function(e) {return getTemplate(e, "flag");}
                },
               ],
               editable: "popup",
            });
        });


      
      function wpErpOs_GridBoolean(container, options){
        var guid = kendo.guid();
        $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
        $('<label class="k-checkbox-label" for="' + guid + '">&#8203;</label>').appendTo(container);
      };
    </script>
</div>
</body>
</html>

Answer 2

由于列是 javascript 对象，可以使用 getter 来构建模板。这允许您获取对象中其他属性的值（例如字段）。 (Self-references in object literals / initializers)

{
  field: "country",
  title: "Country",
  get template() {
      var fieldName = this.field;
      return function(e) {
        var tmp = "";
        var guid = kendo.guid();
        $.each(e[fieldName], function(key, value) {
            tmp += '<span class="k-button" style="line-height:1.25em; cursor:default;">' + value.text + '</span>';
        });
        return tmp;
      }
  },
}

由于我的格式化需求比较简单，所以我只创建了一个字符串模板。

{
    field: "Date",
    get template() {
        return "# if (" + this.field + ") { # #= kendo.toString(kendo.parseDate(" + this.field + ",'yyyy-MM-dd'), 'MM/dd/yyyy') # # } #"
    }
}

kendo-ui 网格列模板函数字段名

kendo-ui grid column template function field-name

kendo-ui

telerik

kendo-grid

kendo-template