JQGridのいずれかの列にハイパーリンクを追加し、ハイパーリンクをクリックすると新しいウィンドウが開きます

Question

特定の列でjqgridがあり、ハイパーリンクをクリックするとハイパーリンクが必要ですwindow.open（）を呼び出します。

また、window.open（）を呼び出すと、ハイパーリンクの列値が必要になります。 いくつかのサンプルコードを私に提供してください.Ahelhelpが高く評価されます。

おかげ

オレグ（）、Iは、以下のコードを試み、それが負荷にエラー「期待オブジェクト」を投げています。

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

私は、hrefイベントをキャプチャするためにdocument.delegateを試しました。

$(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); 
} 

これが目的を解決しました。もう一度オレグとウォルターに感謝します。 COLを定義し、colModelに ：

Answer 1

多分これが助けになります{name:'test',formatter:linkformatter} とJavaScriptでリンクを返す関数という名前linkformatterを作成します。 のような：

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

Answer 2

predefined formatter'showlink'がグリッド列のリンクを作成するために使用することができます。 formatoptionsオプションのtargetプロパティを使用して、targetのリンクを定義することができます。

Answer 3

これは私のパターンです。私が言ったように、それはshowlinkフォーマッタを使うオレグの提案よりもはるかにコードですが、よりカスタマイズ可能です。

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

フォーマッタプロパティは、内部セル値とそのIDを有する三つのパラメータで呼び出されたメソッド名と次のような方法をとるを次のように

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

Answer 4

まずjqueryのJQGrid列定義を宣言するハイパーリンクを返します。

 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

私のアプローチでは、コードがはるかに少なく、解決策が求められます。私のグリッドでは、Project Numberという列がハイパーリンクとしてフォーマットされています。新しいページを開き、プロジェクト番号をパラメータとして渡します。

COLNAMES：[ "プロジェクト＃"、...]、

colModel：[ {名： 'プロジェクト番号'、インデックス： 'プロジェクト番号'、幅：80、キー：真、フォーマッタ： 'showlink'、formatoptions：{baseLinkUrl： 'Details.aspx'、target： '_new'}}、

キーのあるところに注意してください。これがなければ、URLは行番号を返します。返されたURLは、私はjqGridのバージョンを使用していhttp://localhost:57631/Details.aspx?id=2103

である5.0.1