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

希望這有助於！