在 JQGrid 的其中一列中添加超链接，然后单击超链接应该会打开一个新窗口答案

【问题标题】：Add a hyperlink in one of the columns in JQGrid and clicking on Hyperlink should open a new window在 JQGrid 的其中一列中添加超链接，然后单击超链接应该会打开一个新窗口
【发布时间】：2012-02-08 07:00:18
【问题描述】：

我有一个包含某些列的 jqgrid，我需要其中一列中的超链接，单击超链接应该打开一个新窗口，基本上调用 window.open()。

另外，当我调用 window.open() 时，我需要超链接列值。请提供一些示例代码。任何帮助将不胜感激。

谢谢

Oleg，我尝试了下面的代码，它在 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 来捕获 a 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 );
 }

这解决了目的。再次感谢 Oleg 和 Walter。

【问题讨论】：

“另外当我调用window.open()时，我需要超链接列值”，你是说要将列中的值传递到新窗口吗？
是的，我需要将列的值传递到新窗口。

标签： jqgrid

【解决方案1】：

也许这会有所帮助：在 colModel 中，定义一个 col：{name:'test',formatter:linkformatter} 并在 javascript 中创建一个名为 linkformatter 的函数，该函数返回一个链接；喜欢：

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

【讨论】：

lycatliu，我试过这个自定义格式化程序。这对我不起作用，因为我需要在 href 上调用 window.open。上面的代码会将我导航到同一页面中的不同 URL。
改成返回 '';但是，在较新版本的 HTML 中不推荐使用 target="_blank"。
感谢沃尔特和奥列格。但我以不同的方式解决了它。请找到我的方法。

【解决方案2】：

predefined formatter'showlink' 可用于在网格列中创建链接。您可以使用formatoptions 选项的target 属性来定义链接的target。

【讨论】：

Oleg，每次阅读您的回复时，我都会对 jqGrid 有所了解。这比我目前的解决方案更干净。我一直在使用自定义格式化程序来呈现超链接，并附带一个调用 window.open() 的事件处理程序。但是，我或您有一个问题：有没有一种方法可以定义 url 参数的值？它默认为行索引，但我想要单元格值。
Oleg，我尝试了一个自定义格式化程序，即使这样我也无法完成我的任务。请看我的代码。
@WalterStabosz：标准的“showlink”功能受限。例如，您不能将cellvalue 放在另一个位置或将rowid 作为url 的一部分（例如edit/123 而不是edit?id=123）。我希望能够将baseLinkUrl 或只是url 定义为函数并定义我自己。您目前可以在您的情况下继续使用自定义格式化程序，或者您可以使用cellattr 定义onclick 属性，或者您可以使用不显眼的链接，如here
@Oleg - Unobtrusive 链接可能对我不起作用，因为我需要在单击 href 时打开一个新窗口。该代码在网格完成事件上创建了一个 href，这可能没有帮助。我想使用自定义格式化程序，因为我可以获得单元格的值，但我不确定如何在单击 href 时打开新窗口。
@sivshan：如果出现不显眼的链接，您的 JavaScript 代码将被执行。所以你可以做你想做的一切。例如，您可以使用window.open（根据需要选择第二个参数的值）。

【解决方案3】：

这是我的模式。正如我所说，它比 Oleg 建议的使用 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;
}

【讨论】：

【解决方案4】：

首先声明Jquery JQGrid列定义如下

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

formatter 属性采用方法名称，该方法名称由内部具有单元格值及其 id 的三个参数调用，以下方法返回超链接。

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

【讨论】：

【解决方案5】：

我的方法涉及更少的代码行，并提供了所需的解决方案。在我的网格中，名为 Project Number 的列被格式化为超链接。它打开一个新页面并将项目编号作为参数传递。

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

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

注意我在哪里有密钥：true。没有这个，url 返回行号。返回的网址是http://localhost:57631/Details.aspx?id=2103

我使用的是 jqGrid 5.0.1 版

【讨论】：