将外部数据获取到自定义 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

The custom formatter 函数将根据call 调用，其中第一个参数（新的this 值）是网格（请参阅source code）。你也在你的问题中描述了这个事实。

如果您缓存您需要的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;
};