根据Kendo Grid中的valueFormat列更改数字格式

Question

根据Kendo Grid中的valueFormat列更改数字格式

Pra*_*kas 5 c# jquery angularjs kendo-grid kendo-asp.net-mvc

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

如何实现上述目标，请帮忙。

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;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ori*_*lux 3

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

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

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

Run Code Online (Sandbox Code Playgroud)

但是，这并不适用于所有数据，因为某些格式字符串已经包含在括号中并具有类似“{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;
}

Run Code Online (Sandbox Code Playgroud)

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

为了响应 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;
}

Run Code Online (Sandbox Code Playgroud)

希望这可以帮助！

归档时间：	8 年，6 月前
查看次数：	1086 次
最近记录：	8 年，6 月前