将外部数据导入自定义jqGrid格式化程序功能(Get External Data into custom jqGrid formatter function)
我在jqGrid中使用自定义格式化程序功能,以使用链接的下载图标填充“下载”单元格。 我让它使用我的所有代码内联,但我只是将所有JS代码移动到一个自定义对象来打包并命名它。 现在,当我调用自定义格式化程序函数时,“this”引用更改为jqgrid表,并且它无法找到在网格构造之前构造的图标对象。
所有这些都是有道理的,我想知道如何引用作为包装自定义对象一部分的图标对象。 这是相关的代码:
//loop over the json and build the colmodel, call custom formatter jQuery.each(jsonObj, function() { var sdFields = this.supplementalData.fields.field; len = sdFields.length; for(var i=0; i<len; i++) { if(sdFields[i].display) { var currOption = {}; currOption.name = sdFields[i].id; currOption.index = sdFields[i].id; if(sdFields[i].displayType == 'icon') { currOption.formatter = this.resultsGridFormatter; } else if(sdFields[i].dataType == 'date') { //currOption.datefmt = 'mm/dd/YYYY'; currOption.formatter = 'date'; currOption.formatoptions = { srcformat: 'Y-m-d', newformat: 'm/d/Y' }; } currOption.jsonmap = sdFields[i].id; currOption.width = sdFields[i].width; currOption.align = sdFields[i].align; currOption.sorttype = sdFields[i].dataType; currOption.sortable = sdFields[i].sortable; currOption.resizable = sdFields[i].resizeable; colModel[i] = currOption; } } }); //loop over jsonObj and build the icons object (assoc. array) this.setIcons = function( jsonObj ) { var iconsObj = {}; jQuery.each(jsonObj, function() { var sdIcons = this.supplementalData.icons.icon; var len = sdIcons.length; for(var i=0; i<len; i++) { iconsObj[sdIcons[i].id] = sdIcons[i].file; } }); this.icons = iconsObj; }; //custom formatter that formats icon cells by referencing the icons created above this.resultsGridFormatter = function(cellvalue, options, rowObject) { console.log(this); var icons = this.getIcons(); var cellVal = ""; var cssclass = "icon_"+options.colModel.name; if(cellvalue != null) { if(cellvalue.indexOf("://") != -1) { //it is a URL, so link create the icon and link it cellVal += "<a href='"+cellvalue+"' target='_blank'><img src='"+icons[options.colModel.name]+"' class='"+cssclass+"' /></a>"; }else{ //it is an id, so link to the details modal cellVal += "<img src='"+icons[options.colModel.name]+"' id='"+cellvalue+"' class='"+cssclass+"' />"; } } else { cellVal += " "; } //console.log(cellvalue); //console.log(options); //console.log(rowObject); return cellVal; };
我在自定义格式化程序中的console.log语句输出jqgrid表,因此“this.getIcons()”调用失败,因为没有这样的方法。
无论如何我可以在自定义格式化程序中引用图标吗? 我是否必须以某种方式包装函数以包含它或采取其他方法?
I am using a custom formatter function in jqGrid to populate a "download" cell with a download icon that is linked. I had it working with all of my code inline, but I just moved all JS code to a custom object to package it up and namespace it. Now, when I the custom formatter function is called, the "this" reference changes to the jqgrid table and it cannot find the icons object that is constructed prior to the grid construction.
All of this makes sense, and I am left wondering how I can reference the icons object that is part of the wrapping custom object. Here is the relevant code:
//loop over the json and build the colmodel, call custom formatter jQuery.each(jsonObj, function() { var sdFields = this.supplementalData.fields.field; len = sdFields.length; for(var i=0; i<len; i++) { if(sdFields[i].display) { var currOption = {}; currOption.name = sdFields[i].id; currOption.index = sdFields[i].id; if(sdFields[i].displayType == 'icon') { currOption.formatter = this.resultsGridFormatter; } else if(sdFields[i].dataType == 'date') { //currOption.datefmt = 'mm/dd/YYYY'; currOption.formatter = 'date'; currOption.formatoptions = { srcformat: 'Y-m-d', newformat: 'm/d/Y' }; } currOption.jsonmap = sdFields[i].id; currOption.width = sdFields[i].width; currOption.align = sdFields[i].align; currOption.sorttype = sdFields[i].dataType; currOption.sortable = sdFields[i].sortable; currOption.resizable = sdFields[i].resizeable; colModel[i] = currOption; } } }); //loop over jsonObj and build the icons object (assoc. array) this.setIcons = function( jsonObj ) { var iconsObj = {}; jQuery.each(jsonObj, function() { var sdIcons = this.supplementalData.icons.icon; var len = sdIcons.length; for(var i=0; i<len; i++) { iconsObj[sdIcons[i].id] = sdIcons[i].file; } }); this.icons = iconsObj; }; //custom formatter that formats icon cells by referencing the icons created above this.resultsGridFormatter = function(cellvalue, options, rowObject) { console.log(this); var icons = this.getIcons(); var cellVal = ""; var cssclass = "icon_"+options.colModel.name; if(cellvalue != null) { if(cellvalue.indexOf("://") != -1) { //it is a URL, so link create the icon and link it cellVal += "<a href='"+cellvalue+"' target='_blank'><img src='"+icons[options.colModel.name]+"' class='"+cssclass+"' /></a>"; }else{ //it is an id, so link to the details modal cellVal += "<img src='"+icons[options.colModel.name]+"' id='"+cellvalue+"' class='"+cssclass+"' />"; } } else { cellVal += " "; } //console.log(cellvalue); //console.log(options); //console.log(rowObject); return cellVal; };
My console.log statement in the custom formatter outputs the jqgrid table, hence the "this.getIcons()" call fails, as there is no such method.
Is there anyway I can reference the icons within the custom formatter? Will I have to somehow wrap the function to include it or take some other approach?
原文:https://stackoverflow.com/questions/4662028