根据kendo中的valueFormat列更改数字格式网格

Question

我已经创建了动态kendo网格。在网格中有一些需要格式化的列。我有一个字段“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; 
} 

Answer 1

剑道网格的列格式选项将不适合你，因为它适用相同的格式，以一列中的所有细胞，但你要为每一行中不同的格式。

在这种情况下，您应该为ActualValue列指定一个自定义模板。在该模板内部，您可以使用格式化功能来处理您的价值。既然你已经使用了剑道，您可以利用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; 
} 

更新 - 分配模板动态地生成列

针对管理员的要求了与动态列一起工作的解决方案，这里是修改后的代码（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; 
} 

希望这有助于！