8

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

2 に答える 2

13

おそらく誤解です。カスタムフォーマッターのインターフェースはjqGridによって定義されます。カスタムフォーマッタに追加のパラメータを含めるには、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;
}

追加のパラメーターを使用して、グリッドのさまざまな列のカスタムフォーマッターから関数を呼び出します。

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');
        }},
    ...
]

それはあなたが望むものですか？

于 2011-12-13T19:50:44.170 に答える
8

列定義で formatoptions を定義する

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;
}
于 2013-03-02T09:03:07.663 に答える