将外部数据获取到自定义 jqGrid 格式化程序函数中

Question

我在 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 += "&nbsp;";
    }
    //console.log(cellvalue);
    //console.log(options);
    //console.log(rowObject);
    return cellVal;
};

自定义格式化程序中的 console.log 语句输出 jqgrid 表，因此“this.getIcons()”调用失败，因为没有这样的方法。

无论如何，我可以引用自定义格式化程序中的图标吗？我是否必须以某种方式包装该函数才能包含它或采取其他方法？

Answer 1

自定义格式化程序函数将在每次调用< /code> 其中第一个参数（新 this 值）是网格（请参阅 源代码）。您在问题中也描述了这一事实。

如果您缓存所需的 this 值并在自定义格式化程序 resultsGridFormatter 中使用它，则可以轻松修复代码。我的意思是，您可以将代码更改为以下内容

var ts = this;
//custom formatter that formats icon cells by referencing the icons created above
this.resultsGridFormatter = function(cellvalue, options, rowObject) {
    console.log(this);
    console.log(ts);
    var icons = ts.getIcons();
    var cellVal = "";
    // all your other previous code 
    return cellVal;
};