c# – 根据kendo Grid中的valueFormat列更改数字格式
作者：互联网
我创建了动态kendo网格.在网格中有一些列需要格式化.根据我希望格式化其他列的格式,我在数据库中有一个字段“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;
}
解决方法:
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;
}
希望这可以帮助！
标签：jquery,c,angularjs,kendo-grid,kendo-asp-net-mvc 来源： https://codeday.me/bug/20190701/1350501.html