javascript - Kendogrid 列通用模板

Question

我有一个 Kendo 网格列是动态的情况

我有两个rest api，其中一个为我提供有关列的元数据

metadata = [{title1, field1}, {title2, field2}...]

我需要为某些列应用通用模板

我正在迭代元数据并构建列数组

forEach(col in metadata){
 if(title === 'Name'){
     columns.push({
                    title: col.title,
                    template: nameTemplate
                });
 }
 if(title === 'Date'){
     columns.push({
                    title: col.title,
                    template: dateTemplate
                });
 }
 if(title === 'Salary'){
     columns.push({
                    title: col.title,
                    template: currencyTemplate
                });
 }
 else{
   columns.push({
                    title: col.title,
                    field: col.field
                });
  }
}

function dateTemplate(dataItem) {            
 if(date){
     return kendo.toString(kendo.parseDate(dataItem.date, 'yyyy-MM-dd'), 'MM/dd/yyyy');
 }            
 return '';
}

在 datetemplate 中，我获取 dataItem 并绑定(bind)日期字段。

有没有办法可以将模板用于多列例如，如果我的网格中有多个日期列，例如开始日期、结束日期、加入日期、出生日期

如果我选择通过将 fieldName 传递给模板函数来为所有列应用单个模板，如下所示

我尝试过这种方法，但不起作用。

1. format : "{0:MM/dd/yyyy}" //this doesn't work and may be because date is returned as a string in json.

2. if(col.title.indexOf('Date')>0){ //check if title is of date type
     columns.push({
                    title: col.title,
                    template: dateTemplate(fieldName) //pass fieldname
                });
 }

I also tried

3. if(col.title.indexOf('Date')>0){ //check if title is of date type
     columns.push({
                    title: col.title,
                    template: function(dataItem) { dateTemplate(dataItem, fieldName) } //pass fieldname
                });
 }

function dateTemplate(dataItem, field){
  return kendo.toString(kendo.parseDate(dataItem[field], 'yyyy-MM-dd'), 'MM/dd/yyyy');
}

这始终将相同的日期与所有列和所有行联系起来。

请帮助我处理 kendogrid 中的通用模板

Answer 1

您可以使用模板字符串而不是函数:

"#= kendo.toString(kendo.parseDate(" + field + ", 'yyyy-MM-dd'), 'MM/dd/yyyy') #"

这里是一些示例代码和演示:

  var metadata = [
    {
      field: "StartDate",
      title: "Start Date",
    }, 
    {
      field: "EndDate",
      title: "Emd Date",
    }
  ];

  var columns = [];
  for (var i = 0; i < metadata.length; i++){
    var col = metadata[i];
    if(col.title.indexOf('Date')>0){ 
       columns.push(
         {
           field: col.field,
           title: col.title,
           template: dateTemplate(col.field)
         });
    }    
  }


function dateTemplate(field){
  return "#= kendo.toString(kendo.parseDate(" + field + ", 'yyyy-MM-dd'), 'MM/dd/yyyy') #";
}

<强> DEMO