根据 kendo Grid 中的 valueFormat 列更改数字格式答案

【问题标题】：Change number format according to valueFormat column in kendo Grid根据 kendo Grid 中的 valueFormat 列更改数字格式
【发布时间】：2017-09-03 17:44:06
【问题描述】：

我创建了动态剑道网格。在网格中有一些需要格式化的列。根据我想格式化其他列的格式，我在数据库中有一个字段“valueFormat”。

如何实现上述事情请帮忙。

link for sample grid

var data = [{
    "Dept": "Dev",
    "CalculateValue": 0 ,
    "AcualValue": 341.917,
    "ValueFormat": "#.###"
   }, 
   {
    "Dept": "Dev",
    "CalculateValue": 0,
    "AcualValue": 5333.083,
    "ValueFormat": "#.###"
   }, 
   {
    "Dept": "Dev",
    "CalculateValue":0 ,
    "AcualValue": 8735.666,
    "ValueFormat": "{0:c2}"
   }, 
   {
    "Dept": "Dev",
    "CalculateValue":0,
    "AcualValue": 126.000,
    "ValueFormat": "{0:c2}"
  }];

var dateFields = [];
generateGrid(data)

function generateGrid(gridData) {
        if ($(".k-header").length > 0) {
            grid = $("#grid").data("kendoGrid");
            grid.destroy();
            $("#grid").empty();
        }

        $("#grid").kendoGrid({
            toolbar: ["excel"],
            excel: {
                allPages: true,
                filterable: true,
                fileName: 'Aggregate Expenditure/Utilization Report_.xlsx'
            },
            dataSource: {

                pageSize: 100,
                schema: {
                    data: function () { return gridData; },
                    total: function () {
                        return gridData.length;
                    }
                }
            },
            sortable: true,
            filterable: true,
            groupable: true,
            pageable: true,
            columns: generateModel(gridData[0]),
            autoBind: true
        });
        $("#grid").data("kendoGrid").refresh();
    }

function generateModel(gridData) {
   var model = {};
   model.id = "ID";
   var fields = {};
   for (var property in gridData) {
     var propType = typeof gridData[property];

    if (propType == "number") {
       fields[property] = {
       type: "number",
       validation: {
          required: true
       }
    };
    } else if (propType == "boolean") {
      fields[property] = {
      type: "boolean",
      validation: {
        required: true
      }
    };
    } else if (propType == "string") {
      var parsedDate = kendo.parseDate(gridData[property]);
       if (parsedDate) {
         fields[property] = {
           type: "date",
           validation: {
             required: true
           }
         };
      dateFields.push(property);
     } else {
        fields[property] = {
          validation: {
             required: true
          }
        };
     }
   } else {
      fields[property] = {
        validation: {
          required: true
        }
      };
   }

  }
   model.fields = fields;

   return model;
}

【问题讨论】：

标签： c# jquery angularjs kendo-grid kendo-asp.net-mvc

【解决方案1】：

Kendo 网格的列格式选项不适用于您，因为它对列中的所有单元格应用相同的格式，但您将在每一行中使用不同的格式。

在这种情况下，您应该为 ActualValue 列指定一个自定义模板。在该模板中，您可以使用格式化函数来处理您的值。由于您已经在使用 Kendo，因此您可以利用 kendo.format()，如下所示：

template: "#: kendo.format(ValueFormat, AcualValue)#"

但是，这不适用于您的所有数据，因为某些格式字符串已经包含在括号中并且具有类似“{0:c2}”的索引，而其他格式字符串则没有 - “#.### ”。因此，在将它们传递给 kendo.format() 之前，您应该创建一个确保它们一致的函数。我已经用下面的 fixValueFormatString(ValueFormat) 完成了。

这是一个工作示例的链接：http://jsbin.com/jejixediga/edit?js,console,output

这是代码：

var data = [{

  "Dept": "Dev",
  "CalculateValue": 0 ,
  "AcualValue": 341.917,
  "ValueFormat": "#.###"
}, {

  "Dept": "Dev",
  "CalculateValue": 0,
  "AcualValue": 5333.083,
  "ValueFormat": "#.###"
}, {

  "Dept": "Dev",
  "CalculateValue":0 ,
  "AcualValue": 8735.666,
  "ValueFormat": "{0:c2}"
}, {

  "Dept": "Dev",
  "CalculateValue":0,
  "AcualValue": 126.000,
  "ValueFormat": "{0:c2}"
}];

var dateFields = [];

// Make sure all format strings are consistent
function fixValueFormatString(ValueFormat){
  if(!ValueFormat.startsWith("{")){
      ValueFormat = "{0:" + ValueFormat + "}";
  }
  return ValueFormat;
}

generateGrid(data)

  function generateGrid(gridData) {
            if ($(".k-header").length > 0) {
                grid = $("#grid").data("kendoGrid");
                grid.destroy();
                $("#grid").empty();
            }

            $("#grid").kendoGrid({
                toolbar: ["excel"],
                excel: {
                    allPages: true,
                    filterable: true,
                    fileName: 'Aggregate Expenditure/Utilization Report_.xlsx'
                },
                dataSource: {

                    pageSize: 100,
                    schema: {
                        data: function () { return gridData; },
                        total: function () {
                            return gridData.length;
                        }
                    }
                },
                sortable: true,
                filterable: true,
                groupable: true,
                pageable: true,
                autoBind: true,
                columns: [{
                    field: "Dept"
                }, {
                    field: "CalculateValue",
                }, {
                    template: "#: kendo.format(fixValueFormatString(ValueFormat), AcualValue)#",
                    field: "AcualValue"
                }, {
                    field: "ValueFormat"
                }]
            });
            $("#grid").data("kendoGrid").refresh();
        }

function generateModel(gridData) {
  var model = {};
  model.id = "ID";
  var fields = {};
  for (var property in gridData) {
    var propType = typeof gridData[property];

    if (propType == "number") {
      fields[property] = {
        type: "number",
        validation: {
          required: true
        }
      };
    } else if (propType == "boolean") {
      fields[property] = {
        type: "boolean",
        validation: {
          required: true
        }
      };
    } else if (propType == "string") {
      var parsedDate = kendo.parseDate(gridData[property]);
      if (parsedDate) {
        fields[property] = {
          type: "date",
          validation: {
            required: true
          }
        };
        dateFields.push(property);
      } else {
        fields[property] = {
          validation: {
            required: true
          }
        };
      }
    } else {
      fields[property] = {
        validation: {
          required: true
        }
      };
    }

  }
  model.fields = fields;

  return model;
}

更新 - 将模板分配给动态生成的列

为了响应 OP 对使用动态列的解决方案的请求，这里是修改后的代码 (http://jsbin.com/jinowamosa/edit?js,console,output)：

var data = [{

  "Dept": "Dev",
  "CalculateValue": 0 ,
  "AcualValue": 341.917,
  "ValueFormat": "#.###"
}, {

  "Dept": "Dev",
  "CalculateValue": 0,
  "AcualValue": 5333.083,
  "ValueFormat": "#.###"
}, {

  "Dept": "Dev",
  "CalculateValue":0 ,
  "AcualValue": 8735.666,
  "ValueFormat": "{0:c2}"
}, {

  "Dept": "Dev",
  "CalculateValue":0,
  "AcualValue": 126.000,
  "ValueFormat": "{0:c2}"
}];

var dateFields = [];

function fixValueFormatString(ValueFormat){
  if(!ValueFormat.startsWith("{")){
      ValueFormat = "{0:" + ValueFormat + "}";
  }
  return ValueFormat;
}

generateGrid(data)

  function generateGrid(gridData) {
            if ($(".k-header").length > 0) {
                grid = $("#grid").data("kendoGrid");
                grid.destroy();
                $("#grid").empty();
            }

            $("#grid").kendoGrid({
                toolbar: ["excel"],
                excel: {
                    allPages: true,
                    filterable: true,
                    fileName: 'Aggregate Expenditure/Utilization Report_.xlsx'
                },
                dataSource: {
                    pageSize: 100,
                    schema: {
                        data: function () { return gridData; },
                        total: function () {
                            return gridData.length;
                        }
                    }
                },
                sortable: true,
                filterable: true,
                groupable: true,
                pageable: true,
                autoBind: true,
                columns: generateColumns(gridData[0])
            });
            $("#grid").data("kendoGrid").refresh();
        }

function generateColumns(gridData) {
  var fields = {};
  var columns = [];

  for (var property in gridData) {
    var propType = typeof gridData[property];

    if (propType == "number") {
      fields[property] = {
        type: "number",
        validation: {
          required: true
        }
      };
    } else if (propType == "boolean") {
      fields[property] = {
        type: "boolean",
        validation: {
          required: true
        }
      };
    } else if (propType == "string") {
      var parsedDate = kendo.parseDate(gridData[property]);
      if (parsedDate) {
        fields[property] = {
          type: "date",
          validation: {
            required: true
          }
        };
        dateFields.push(property);
      } else {
        fields[property] = {
          validation: {
            required: true
          }
        };
      }
    } else {
      fields[property] = {
        validation: {
          required: true
        }
      };
    }

  }

  for (var field in fields) { 
        if(field == 'AcualValue'){
          columns.push({ field: field, template: "#: kendo.format(fixValueFormatString(ValueFormat), AcualValue)#" });
        } else {
          columns.push({ field: field });
        }
    }

  return columns;
}

希望这会有所帮助！

【讨论】：

你做得很好，但在我身边的列是动态生成的，并且会有更多的列，如“CalculateValue”和“ActualValue”，所以你的解决方案不适用于我的情况。
我已经更新了答案，使其也适用于动态列。
看，您将 ValueFormat 传递给函数“fixValueFormatString”，但根据您编写的代码，ValueFormat 变量将如何获取其值。我总是收到“未定义”错误。
看看JS Bin：jsbin.com/jinowamosa/edit?js,console,output。我在列模板中调用 fixValueFormatString(ValueFormat)，其中 ValueFormat 是数据模型中包含格式字符串的字段。不确定您得到“未定义”的内容，但请检查您的字段名称的拼写。在您的示例中，您的 ActualValue 缺少一个字母。