Làm cách nào để chuyển các biến bổ sung vào định dạng jqGrid?

Question

Tôi đang cố gắng để tạo ra một số loại định dạng tái sử dụng cho cột jqGrid, Tôi muốn tạo ra định dạng tuỳ chỉnh, nơi tôi có thể truyền dữ liệu bổ sung, một cái gì đó tương tự như mã này:

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

Answer 1

Có lẽ một sự hiểu lầm. Giao diện của custom formatter được xác định bởi jqGrid. Để có các tham số bổ sung trong trình định dạng tùy chỉnh, bạn phải sửa đổi mã nguồn của jqGrid.

Tin tốt là bạn không thực sự cần mở rộng tiêu chuẩn trình định dạng tùy chỉnh. Thay vào đó bạn muốn có thể chỉ cần chia sẻ mã. Vì vậy, bạn có thể xác định mã chung làm chức năng như

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

và gọi hàm từ trình định dạng tùy chỉnh của các cột khác nhau của lưới có thông số bổ sung.

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

Đó có phải là những gì bạn muốn không?

Answer 2

xác định formatoptions trong định nghĩa cột

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

và sau đó bạn có thể truy cập nó bên trong định dạng tùy chỉnh

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