如何使用动态列绑定为jqgrid添加自定义格式器

这几乎是前一个问题的延续。 Problem showing jqgrid with dynamic column binding 如何使用动态列绑定为jqgrid添加自定义格式器

我想把一个自定义的格式化为像下面的列。但没有任何反应。请帮忙。

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"; 
}

来源

2011-03-02 silpa

如果使用

"formatter": "InterFinalPriceFormatter"

您不将“formatter”属性的值设置为函数。

解决此问题的一种方法是循环访问result.colModelList，并验证是否使用“formatter”属性，并将某个字符串值用作JavaScript中的函数。然后你可以用相应的格式化函数的值覆盖该属性。

另一种方式将是格式化使用内联函数：

"formatter": "function (cellValue, opts, rowObject) { return cellValue + \"Testing price formatter\"; }"

在路上，你会不会有代码和电网参数的明确分离，但您会收到内部格式的一些封装格。

修订：我希望下一个代码片段（未经测试）可以解释清楚我的意思是在更新2首次实施方式

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); 
    } 
});

：这将是更好的寄存器的自定义格式化程序和非格式化程序，如标准格式化程序，如the old answer或answer one中所述。之后，可以真正使用"formatter": "InterFinalPriceFormatter"这样的语法，并且自定义函数$.fn.fmatter.InterFinalPriceFormatter和$.fn.fmatter.InterFinalPriceFormatter.unformat将被jqGrid自动调用。

来源

2011-03-03 00:14:24 Oleg

我了解内联函数部分，但没有得到第一部分。当我循环访问'result.colModelList'时，如何用格式化程序代替？你能举一些伪代码的例子吗？ – silpa 2011-03-03 15:47:22

这是什么，var InterFinalPriceFormatter =“函数（cellValue，opts，rowObject）{返回cellValue + \”测试价格格式化程序\“;}” – silpa 2011-03-03 15:53:41

@silpa：我更新我的答案。 'var InterFinalPriceFormatter =“函数（cellValue，opts，rowObject）{return cellValue + \”Testing price formatter \“;}”;'定义了具有'typeof（InterFinalPriceFormatter）===“string”'的变量'InterFinalPriceFormatter'和'var InterFinalPriceFormatter = function（cellValue，opts，rowObject）{return cellValue + \“Testing price formatter \”; };'定义函数和'typeof（InterFinalPriceFormatter）===函数“'” – Oleg 2011-03-03 16:26:33

如何使用动态列绑定为jqgrid添加自定义格式器

回答

相关问题