如何使用动态列绑定为 jqgrid 添加自定义格式化程序 [英] How to add custom Formatter for jqgrid with dynamic column binding
问题描述
这几乎是上一个问题的延续.显示带有动态列绑定的 jqgrid 的问题
This is almost continuation of a previous question. Problem showing jqgrid with dynamic column binding
我正在尝试为下面的列添加自定义格式化程序.但什么也没有发生.请帮忙.
I am trying to put a Custom Formatter for the columns like below. But nothing happens. Please help.
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 结果:
The JSON result from action:
{
"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 函数:
The Javascript functions for formatters:
function CouponFormatter(cellValue, opts, rowObject) {
return cellValue + "Testing coupon formatter";
}
function InterFinalPriceFormatter(cellValue, opts, rowObject) {
return cellValue + "Testing price formatter";
}
推荐答案
如果你用
"formatter": "InterFinalPriceFormatter"
您没有将formatter"属性的值设置为函数.
you don't set the value of "formatter" property to the function.
解决此问题的一种方法是循环遍历 result.colModelList 并验证是否使用了带有某个字符串值的格式化程序"属性，您已将其作为 JavaScript 中的函数实现.然后就可以用对应的格式化函数的值覆盖属性了.
One way to fix the problem is to loop through result.colModelList and verify that one use "formatter" property with some string value for which you has implementation as the function in the JavaScript. Then you can overwrite the property with the value of the corresponding formatter function.
另一种方法是在格式化程序中使用内联函数:
Another way will be use inline functions in the formatter:
"formatter": "function (cellValue, opts, rowObject) { return cellValue + "Testing price formatter"; }"
在这种方式下，您不会清楚地分离代码和网格参数，但是您会在网格内收到一些格式化程序的封装.
In the way you will be not has clear separation of the code and the grid parameters, but you receive some encapsulation of the formatter inside the grid.
已更新:我希望下一个代码片段(未经测试)可以明确我在第一种实现方式下的意思
UPDATED: I hope that the next code fragment (untested) could make clear what I mean under the first implementation way
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:最好将自定义格式化程序和取消格式化程序注册为标准格式化程序，就像 旧答案或回答一个.之后就可以真正使用 "formatter": "InterFinalPriceFormatter" 和自定义函数 $.fn.fmatter.InterFinalPriceFormatter 和 $.fn 之类的语法.fmatter.InterFinalPriceFormatter.unformat会被jqGrid自动调用.
UPDATED 2: It would be better to register the custom formatters and unformatters as standard formatters like it's described in the old answer or in answer one. After that one can really use the syntax like "formatter": "InterFinalPriceFormatter" and the custom defined functions $.fn.fmatter.InterFinalPriceFormatter and $.fn.fmatter.InterFinalPriceFormatter.unformat will be automatically called by jqGrid.
这篇关于如何使用动态列绑定为 jqgrid 添加自定义格式化程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
