Tengo un jqgrid con ciertas columnas y necesito hipervínculo en una de las columnas, haga clic en el enlace debe abrir una nueva ventana, básicamente llamar a una ventana.open().

También cuando llamo a la ventana.open(), necesito el hipervínculo de la columna valor.
Por favor me proporcione el código de ejemplo.Anyhelp sería muy apreciada.

Gracias

Oleg, he probado el código de abajo, y es error de tiro «se esperaba un objeto» en la carga().

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

Me hizo probar el documento.delegado para la captura de la a href evento.

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

Yo no era capaz de capturar este evento.
Lo siento soy nuevo en Jquery. Por favor me corrija si estoy equivocado.

Gracias

Esto es cómo lo resolví. En la grilla completa del evento se ha añadido el siguiente código.

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

Y, a continuación, agrega un controlador de eventos para él.

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

Esta resuelto el propósito. Gracias de nuevo Oleg y Walter.

  • «También cuando llamo a la ventana.open(), necesito el hipervínculo de la columna de valor», estás diciendo que quieres pasar el valor de la columna a la nueva ventana?
  • Sí tengo que pasar el valor de la columna a la nueva ventana.
InformationsquelleAutor siv | 2012-01-11

5 Comentarios

  1. 4

    tal vez esto va a ser de ayuda:
    en colModel,definir una col: {name:'test',formatter:linkformatter}
    y en javascript crear una función denominada linkformatter que devuelve un enlace;
    como:

    function linkformatter( cellvalue, options, rowObject){
      return '<a href='xxxxxx' />';
    }
    
    • lycatliu, he probado este formateador personalizado. Esto no funciona para mí, ya que tengo que llamar a la ventana.abierto en el href. El código de arriba se vaya de mí a una URL diferente en la misma página.
    • cambiar para volver a » <a href=’xxxxxx’ target=»_blank» />’; sin Embargo, target=»_blank» está en desuso en las nuevas versiones de HTML.
    • Gracias Walter y Oleg. Pero he resuelto de una manera diferente. Por favor, encontrar la manera en que lo hice.
  2. 2

    La predefinidos formateador 'showlink' puede ser utilizado para crear el enlace en la columna de la cuadrícula. Usted puede utilizar target propiedad de la formatoptions opciones para definir objetivo del enlace.

    • Oleg, aprendo algo nuevo acerca de jqGrid cada vez que leo uno de tus respuestas. Esto es más limpio que mi solución actual. He estado usando un formateador personalizado para representar los hipervínculos, unido a un controlador de eventos que llama a la ventana.open() . Sin embargo, tengo una pregunta o: ¿existe una forma de definir el valor del parámetro de url? El valor predeterminado es el de la fila de índice, pero quiero que el cellvalue.
    • Oleg, he intentado un formateador personalizado y a pesar de que yo no era capaz de lograr mi tarea. Por favor, ver a mi código .
    • El estándar de ‘showlink’ ha hacer su funcionalidad es limitada. Por ejemplo, usted no puede colocar cellvalue en el otro lugar o lugar el rowid como la parte de la url (como edit/123 y no edit?id=123). Yo preferiría ser capaz de definir baseLinkUrl o simplemente url como la función y se define a si mismo. Actualmente, se puede continuar el uso de formateador personalizado en su caso, o puede utilizar cellattr para definir onclick atributo o puede utilizar Discreta enlaces como aquí
    • La Discreta enlaces pueden no funcionar para mí, ya que la necesito para abrir una nueva ventana a href haga clic en. El código crea un href de la red completa del evento, lo que puede no ser útil. Me gustaría ir para formateador Personalizado, ya que puede obtener el valor de la celda, pero no estoy seguro de cómo abrir una nueva ventana a href haga clic en.
    • En caso de discreta vincula el código JavaScript que se ejecutará. Así que usted puede hacer todo lo que usted desea. Por ejemplo, usted puede utilizar window.open (elegir el valor del segundo parámetro como desee).
  3. 1

    Declarar primero el Jquery JQGrid definición de columna como sigue

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

    El formateador de la propiedad toma el nombre del método que se invoca con los tres parámetros que internamente hacer que las celdas de valor y su id y el siguiente método devuelve el hipervínculo.

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

    La siguiente Función JS se invoca después de hacer clic en el hipervínculo que abre otra página en una ventana.

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

    Mi enfoque consiste en un número de líneas de código y da la solución pidió. En mi red, una columna con el nombre del Proyecto Número de formato es un hipervínculo. Se abre una nueva página y pasa el número de proyecto como un parámetro.

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

    Nota donde he clave: cierto. Sin esto, la url que devuelve el número de fila. La url devuelta es http://localhost:57631/Details.aspx?id=2103

    Agregar un hipervínculo en una de las columnas de JQGrid y hacer clic en Hipervínculo debe abrir una nueva ventana

    Agregar un hipervínculo en una de las columnas de JQGrid y hacer clic en Hipervínculo debe abrir una nueva ventana

    Estoy usando jqGrid versión 5.0.1

  5. 0

    Este es mi patrón. Como ya he dicho, es mucho más código que Oleg sugerencia de utilizar el showlink formateador, pero es más personalizable.

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

Dejar respuesta

Please enter your comment!
Please enter your name here