在JQGrid中的一列中添加超链接，单击超链接将打开一个新窗口

我有一个带有特定列的jqgrid，我需要其中一列中的超链接，单击超链接应该会打开一个新窗口，基本上称为window.open（）

---

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

谢谢

Oleg，我尝试了下面的代码，它在load（）中抛出错误“objectexpected”

我也无法捕捉到这一事件。 对不起，我是Jquery的新手。如果我错了，请纠正我

谢谢

我就是这样解决的。在grid complete事件中添加了以下代码

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

这就解决了问题。再次感谢奥列格和沃尔特。

也许这会有所帮助： 在colModel中，定义一个col:

{name:'test'，formatter:linkformatter}

在javascript中创建一个名为linkformatter的函数，该函数返回一个链接； 比如：

函数链接格式化程序（单元格值、选项、行对象）{
返回“”；
}

可以使用

'showlink'

在网格列中创建链接。您可以使用

formatoptions

选项的

target

属性来定义链接的类型。

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

//将实时事件处理程序绑定到与选择器“a.linkWindowOpener”匹配的任何元素
$（'a.linkWindowOpener'）.live（'click'，linkWindowOpener'）；
//colModel设置
{name:'itemsdescription'，index:'itemsdescription'，格式化程序：itemsdescription\u formatter，unformat:itemsdescription\u unformmate}，
//用于创建超链接的自定义格式设置程序
函数项描述\格式化程序（单元格值、选项、行对象）{
var html=''；
var itemID=rowObject.itemID；
var itemDescription=cellvalue；
变量a=$（''）
.attr（'href'，'/Forms/WorkOrder/ViewItem.aspx？ItemID='+ItemID）
.attr（'data-itemsdescription'，itemsdescription）
.html（项目描述）
.addClass（'linkWindowOpener'）；
html=a.getHtml（）；
返回html；
}
//返回原始值是不可原谅的
函数项描述（单元格值、选项、单元格）{
返回$（'a'，cell.attr（'data-itemsdescription'）；
}
//单击超链接时要调用的事件处理程序
函数链接WindowOpener（事件）{
event.preventDefault（）；
event.stopPropagation（）；
var o=$（event.currentTarget）；
var url=o.attr（'href'）；
窗口打开（url）；
返回false；
}
//我编写的jQuery扩展函数用于获取元素的HTML
//返回元素的HTML。它通过包装元素来工作
//在DIV中调用DIV.html（）。然后，它将元素返回到
//它是原始DOM位置
jQuery.fn.getHtml=函数（）{
var elm=$（此[0]）；
//创建一个div
var div=$（''）；
//将其附加到目标元素的父元素
elm.parent（）.append（div）；
//将元素附加到div
分区附加（elm）；
//获取div的html
var html=div.html（）；
//将元素移回其父元素
div.parent（）.append（elm）；
div.remove（）；
返回html；
}

首先声明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>';}

---

我的方法涉及更少的代码行，并给出了所要求的解决方案。在我的网格中，名为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将返回行号。返回的url为

---

我使用的是jqGrid 5.0.1版

“当我调用window.open（）时，我需要超链接列值”，你是说要将该列的值传递到新窗口吗？是的，我需要将该列的值传递到新窗口。Oleg，每次阅读你的回答时，我都会学到一些关于jqGrid的新知识。这比我当前的解决方案更干净。我一直在使用自定义格式化程序来呈现超链接，附带了一个调用window.open（）的事件处理程序。但是，我还是有一个问题要问：有没有办法定义url参数的值？它默认为行索引，但我想要cellvalue。Oleg，我尝试了一个自定义格式化程序，但即使这样，我也无法完成我的任务。请查看我的代码。@WalterStabosz:标准的“showlink”具有do限制功能。例如，您不能将

cellvalue

放在另一个位置，也不能将rowid作为url的一部分（例如

edit/123

而不是

edit？id=123

）。我希望能够将

baseLinkUrl

或仅仅

url

定义为函数，并自己定义是否。在您的情况下，您当前可以继续使用自定义格式化程序，或者您可以使用

cellattr

来定义

onclick

属性，或者您可以使用诸如@Oleg之类的不引人注目的链接-不引人注目的链接可能对我不起作用，因为我需要在href单击时打开一个新窗口。代码创建了一个href on grid complete事件，这可能没有什么帮助。我想使用自定义格式化程序，因为我可以获取单元格的值，但我不确定如何在href单击时打开新窗口。@sivshan：如果存在不引人注目的链接，将执行JavaScript代码。所以你可以做你想做的一切。例如，您可以使用

窗口。打开
（根据需要选择第二个参数的值）。lycatliu，我尝试了这个自定义格式化程序。这对我不起作用，因为我需要在href上调用window.open。上面的代码将我导航到同一页面中的其他URL。将其更改为返回“”；但是，target=“\u blank”在较新版本的HTML中不推荐使用。谢谢Walter和
 // 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;
}

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

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

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

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

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