这几乎是前一个问题的延续。 Problem showing jqgrid with dynamic column binding
我正在尝试为下面的列添加自定义格式化程序。但没有任何反应。请帮忙。
JSP:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
$(document).ready(function() {
$.ajax( {
type : "GET",
url : "interFinalTbaAction",
data : "",
dataType : "json",
success : function(result) {
var colD = result.couponStripList, colM = result.colModelList;
jQuery("#InterFinalTBAGrid").jqGrid( {
data : colD.rootVar,
datatype : 'local',
gridview : true,
colModel : colM,
loadComplete : function(data) {
},
loadError : function(xhr, status, error) {
alert('grid loading error');
}
});
},
error : function(x, e) {
alert(x.readyState + " " + x.status + " " + e.msg);
}
});
});
</script>
</head>
<body>
<table id="InterFinalTBAGrid">
<tr>
<td />
</tr>
</table>
</body>
</html>
来自行动的JSON结果:
{
"colModelList": [
{
"formatter": "CouponFormatter",
"index": 0,
"jsonmap": null,
"key": false,
"label": "Coupon",
"name": "coupon",
"resizable": true,
"search": true,
"sortable": false,
"title": true,
"width": 100
},
{
"formatter": "InterFinalPriceFormatter",
"index": 1,
"jsonmap": null,
"key": false,
"label": "03-10-11",
"name": "prceCM",
"resizable": true,
"search": true,
"sortable": false,
"title": true,
"width": 150
},
{
"formatter": "InterFinalPriceFormatter",
"index": 2,
"jsonmap": null,
"key": false,
"label": "04-13-11",
"name": "prceCMPlusOne",
"resizable": true,
"search": true,
"sortable": false,
"title": true,
"width": 150
},
{
"formatter": "InterFinalPriceFormatter",
"index": 3,
"jsonmap": null,
"key": false,
"label": "05-12-11",
"name": "prceCMPlusTwo",
"resizable": true,
"search": true,
"sortable": false,
"title": true,
"width": 150
},
{
"formatter": "InterFinalPriceFormatter",
"index": 4,
"jsonmap": null,
"key": false,
"label": "06-13-11",
"name": "prceCMPlusThree",
"resizable": true,
"search": true,
"sortable": false,
"title": true,
"width": 150
}
],
"couponStripList": {
"rootVar": [
{
"coupon": 5.0,
"prceCM": "103.734375,103.734375",
"prceCMPlusOne": "103.359375,99.03",
"prceCMPlusThree": "102.671875,102.671875",
"prceCMPlusTwo": "103.015625,103.015625"
},
{
"coupon": 5.5,
"prceCM": "105.984375,105.984375",
"prceCMPlusOne": "105.671875,99.2",
"prceCMPlusThree": "105.046875,105.046875",
"prceCMPlusTwo": "105.359375,105.359375"
}
]
},
"deliveredDataTimestamp": "03-02-11 11:52:57",
"requestedTimestamp": null
}
格式化程序的Javascript函数:
function CouponFormatter(cellValue, opts, rowObject) {
return cellValue + "Testing coupon formatter";
}
function InterFinalPriceFormatter(cellValue, opts, rowObject) {
return cellValue + "Testing price formatter";
}
答案 0 :(得分:12)
如果您使用
"formatter": "InterFinalPriceFormatter"
您没有将“formatter”属性的值设置为函数。
解决问题的一种方法是遍历result.colModelList
并验证是否使用“formatter”属性,其中包含一些字符串值,您将其作为JavaScript中的函数实现。然后,您可以使用相应格式化程序函数的值覆盖该属性。
另一种方法是在格式化程序中使用内联函数:
"formatter": "function (cellValue, opts, rowObject) { return cellValue + \"Testing price formatter\"; }"
在这种情况下,您将无法清楚地分离代码和网格参数,但是您会在网格中收到格式化程序的一些封装。
更新:我希望下一个代码片段(未经测试)可以在第一种实现方式下明确我的意思
var functionsMapping = {
// here we define the implementations of the custom formatter which we use
"CouponFormatter": function (cellValue, opts, rowObject) {
return cellValue + "Testing coupon formatter";
},
"InterFinalPriceFormatter": function (cellValue, opts, rowObject) {
return cellValue + "Testing price formatter";
}
};
$.ajax({
type: "POST",
url: "interFinalTbaAction.action",
data: "",
dataType: "json",
success: function(result) {
var i, cm, colD = result.couponStripList,
colN = result.columnNames,
colM = result.colModelList;
for (i=0;i<colM.length,i++) {
cm = colM[i];
if (cm.hasOwnProperty("formatter") &&
functionsMapping.hasOwnProperty(cm.formatter)) {
// fix colM[i].formatter from string to the function
cm.formatter = functionsMapping[cm.formatter];
}
}
jQuery("#dataGrid").jqGrid({/* all parameters from your code */});
},
error: function(jqXHR, textStatus, errorThrown){
alert("Error Occured!" + " | " + jqXHR.responseText + " | " +
textStatus + " | " + errorThrown);
}
});
更新2 最好注册自定义格式化程序和非格式化程序标准格式化程序,如the old answer中所述或在answer one。之后,可以使用"formatter": "InterFinalPriceFormatter"
之类的语法,jqGrid将自动调用自定义函数$.fn.fmatter.InterFinalPriceFormatter
和$.fn.fmatter.InterFinalPriceFormatter.unformat
。