如何使用动态列绑定为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并验证是否使用带有某些字符串值的"formatter"属性，并已将其实现为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屋！
