如何将附加变量传递给 jqGrid 格式化程序？答案

【问题标题】：How to pass additional variables to jqGrid formatter?如何将附加变量传递给 jqGrid 格式化程序？
【发布时间】：2026-01-29 19:25:02
【问题描述】：

我正在尝试为 jqGrid 列创建某种可重用的格式化程序，我想创建自定义格式化程序，我可以在其中传递其他数据，类似于以下代码：

function imageLinkFormatter(cellval,options,rowObject,icon,link_class,link_action){
     var img='<span class="ui-icon '+icon+' icon"><span/>';    
    var link='<a href="#'+link_action+'/id/'+rowObject.id+'" class="'+link_class+'" rel="'+rowObject.id+'">'+img+'</a>';
    return link;
    }

【问题讨论】：

标签： javascript variables jqgrid formatter

【解决方案1】：

这可能是个误会。 custom formatter 的接口由 jqGrid 定义。要在自定义格式化程序中添加其他参数，您必须修改 jqGrid 的源代码。

好消息是您实际上并不需要扩展 standard 自定义格式化程序。而不是你想要的可能只是共享代码。所以你可以将通用代码定义为像

这样的函数

function imageLinkFormatter(cellval, options, rowObject, icon, link_class, link_action) {
    var img = '<span class="ui-icon ' + icon + ' icon"><span/>';    
    var link = '<a href="#' + link_action + '/id/' + rowObject.id + '" class="' +
        link_class + '" rel="' + rowObject.id + '">' + img + '</a>';
    return link;
}

并使用附加参数从网格不同列的自定义格式化程序调用函数。

colModal: [
    {name: 'col1', formatter: function (cellvalue, options, rowObject) {
            return imageLinkFormatter(cellvalue, options, rowObject,
                'ui-icon-pencil', 'edit-link-class', 'Edit');
        }},
    {name: 'col2', formatter: function (cellvalue, options, rowObject) {
            return imageLinkFormatter(cellvalue, options, rowObject,
                'ui-icon-plus', 'add-link-class', 'Add');
        }},
    {name: 'col2', formatter: function (cellvalue, options, rowObject) {
            return imageLinkFormatter(cellvalue, options, rowObject,
                'ui-icon-trash', 'del-link-class', 'Delete');
        }},
    ...
]

这是你想要的吗？

【讨论】：

感谢您的回答和解释，我认为我必须扩展自定义格式化程序，但这是完美的解决方案。问候

【解决方案2】：

在列定义中定义格式选项

colModal: [
    {name: 'col1', 
     formatter: imageLinkFormatter, 
     formatoptions: {
        icon: 'ui-icon-pencil', 
        link_class: 'edit-link-class', 
        action: 'Edit'
    }},
    {name: 'col2', formatter: imageLinkFormatter, formatoptions: {icon: 'ui-icon-plus', link_class: 'add-link-class', action: 'Add'}},
    {name: 'col3', formatter: imageLinkFormatter, formatoptions: {icon: 'ui-icon-trash', link_class: 'del-link-class', action: 'Add'}}
    ...
]

然后您可以在自定义格式化程序中访问它

function imageLinkFormatter(cellval, options, rowObject) {
    var img = '<span class="ui-icon ' + options.colModel.formatoptions.icon + ' icon"><span/>';
    var link = '<a href="#' + options.colModel.formatoptions.action + '/id/' + rowObject.id + '" class="' +
        options.colModel.formatoptions.link_class + '" rel="' + rowObject.id + '">' + img + '</a>';
    return link;
}

【讨论】：