Добавьте гиперссылку в один из столбцов в JQGrid и, нажав на гиперссылку, откроется новое окно.

Question

У меня есть jqgrid с определенными столбцами, и мне нужна гиперссылка в одном из столбцов. Если щелкнуть гиперссылку, откроется новое окно, в основном, вызовем window.open ().window.open (), мне нужно значение столбца гиперссылки.Пожалуйста, предоставьте мне пример кода. Любой помощник был бы очень признателен.

Спасибо

Олег, я пробовал приведенный ниже код, и он выдает ошибку «объект ожидается» в load ().

 {name:'FileName', FileName:'price', width:60, align:"center", formatter:returnMyLink}

    function returnMyLink(cellValue, options, rowdata) 
     {  
             return "<a href='javascript:load();'>Open Window</a>";

     }
     function load() 
      {
         var guid = 'CEF9C407-2500-4619-95E3-8E6227B65954';
  window.open              ('/irj/servlet/prt/portal/prtroot/com.medline.medpack.ExcelViewerPL.ExcelViewer?report=CustomerBenefit&reportId='+guid );
       }

Я попробовал document.delegate для захвата события href.

$(document).delegate('#CustomerSavingsView .jqgrow td a[href="#"]', 'click',function()
  {
     alert('test');
  }

Мне также не удалось записать это событие.Извините, я новичок в Jquery.Пожалуйста, поправьте меня, если я ошибаюсь.

Спасибо

Вот как я это решил.В событие завершения сетки добавлен следующий код.

      hl = "<a href='#Test' target='_blank' id='hlink"+cl+"'>Test</a>";

А затем добавлен обработчик события для него.

$(document).delegate('#CustomerSavingsView .jqgrow td a[href*="#Test"]', 'click',  function () 
 { 

     var guid = 'CEF9C407-2500-4619-95E3-8E6227B65954';
   window.open('/irj/servlet/prt/portal/prtroot/com.medline.medpack.ExcelViewerPL.ExcelViewer?report=CustomerBenefit&reportId='+guid );
 }

Это решило задачу.Еще раз спасибо Олегу и Уолтеру.

Answer 1

возможно это поможет: в colModel определите col: {name:'test',formatter:linkformatter} и в javascript создайте функцию с именем linkformatter, которая возвращает ссылку;как:

function linkformatter( cellvalue, options, rowObject){
  return '<a href='xxxxxx' />';
}

Answer 2

Предопределенный форматер 'showlink' может использоваться для создания ссылки в столбце сетки.Вы можете использовать target свойство параметров formatoptions, чтобы определить target ссылки.

Answer 3

Мой подход включает в себя меньше строк кода и дает требуемое решение. В моей сетке столбец с именем «Номер проекта» отформатирован как гиперссылка. Он открывает новую страницу и передает номер проекта в качестве параметра.

colNames: ["Project #", ...],

colModel: [ 
              { name: 'Project Number', index: 'Project Number', width: 80, key: true, formatter: 'showlink', formatoptions: { baseLinkUrl: 'Details.aspx', target: '_new' } },

Обратите внимание, где у меня есть ключ: правда. Без этого URL возвращает номер строки. URL возвращается http://localhost:57631/Details.aspx?id=2103

Я использую jqGrid версии 5.0.1

Answer 4

Сначала объявите определение столбца Jquery JQGrid следующим образом

   colModel: [{ name: 'Notes/Memos', width: "5", sortable: true, classes: 'ellip', resizable: false, formatter: MethodFormatter }]

Свойство formatter принимает имя метода, которое вызывается с тремя параметрами, которые внутренне имеют значение ячейки и его идентификатор, а следующий метод возвращает гиперссылку.

       function MethodFormatter(cellValue, options, rowObject) {
            var selectedRowId = options.rowId;
            return '<a href="javascript:MethodJS(' + selectedRowId + ')" style="color: #3366ff" id="' + selectedRowId + '" >' + cellValue + '</a>';}

Следующая функция JS вызывается после нажатия на гиперссылку, которая открывает другую страницу в окне.

       function MethodJS(selectedRowId) {
    document.location.href = "ViewContact.aspx?NoteID=" + selectedRowId;
}

Answer 5

Это мой шаблон. Как я уже сказал, это гораздо больше кода, чем предложение Олега использовать форматтер showlink, но он более настраиваемый.

 // bind a live event handler to any elements matching the selector 'a.linkWindowOpener'
 $('a.linkWindowOpener').live('click', linkWindowOpener);

// colModel settings
    { name: 'ItemDescription', index: 'ItemDescription', formatter: itemDescription_formatter, unformat: itemDescription_unformatter }, 

// custom formatter to create the hyperlink 
function itemDescription_formatter(cellvalue, options, rowObject) {

    var html = '';
    var itemID = rowObject.itemID;
    var itemDescription = cellvalue;

    var a = $('<a>')
            .attr('href', '/Forms/WorkOrder/ViewItem.aspx?ItemID=' + itemID)
            .attr('data-itemDescription', itemDescription )
            .html(itemDescription)
            .addClass('linkWindowOpener');

    html = a.getHtml();

    return html;
}

// unformatter to return the raw value
function itemDescription_unformatter( cellvalue, options, cell) {
    return $('a', cell).attr('data-itemDescription');
}

// event handler to call when clicking the hyperlink
function linkWindowOpener(event) {
    event.preventDefault();
    event.stopPropagation();
    var o = $(event.currentTarget);
    var url = o.attr('href');
    window.open(url);
    return false;
}

// jQuery extenision function I wrote to get the HTML of an element
// returns the HTML of an element. It works by wrapping the element 
// inside a DIV and calling DIV.html(). It then returns the element back to 
// it's original DOM location
jQuery.fn.getHtml = function () {

    var elm = $(this[0]);
    // create a div
    var div = $('<div>');

    // append it to the parent of the target element
    elm.parent().append(div);
    // append the element to the div
    div.append(elm);

    // get the html of the div
    var html = div.html();

    // move element back to its parent
    div.parent().append(elm);
    div.remove();

    return html;
}