C'è un modo per trascinare una riga da un JQGrid a un campo di testo trascinabile usando il plugin gridDnD?

Question

Vorrei trascinare una riga da un JQGrid in un campo di immissione del testo e aggiungere il testo di una colonna dalla riga rilasciata alla fine del testo nell'input.

Ovviamente questo è lontano dalla soluzione, ma trascinando una riga da una griglia con questo montata sulla (dove #inputTextField è un campo di testo 'droppable') genera l'errore JavaScript this.p is undefined:

$("#searchResultsGrid").jqGrid('gridDnD', 
    { 
     connectWith: '#inputTextField" 
    } 
); 

Questo perché la destinazione non è ovviamente un JQGrid e non ha this.p definito. Ho provato un paio di cose diverse ... forse c'è un modo in cui posso "ingannare" l'evento drop per funzionare? Grazie mille per qualsiasi aiuto :)

Answer 1

L'ho capito !! In primo luogo, fare le file della griglia trascinabili (questa funzione dovrebbe essere chiamata in gridComplete gestore di eventi griglia):

function makeGridRowsDraggable() { 

     var $searchResultsGrid = $("#searchResultsGrid"), 
      $searchResultsRows = $("#searchResultsContainer .ui-row-ltr"); 

     $searchResultsRows.css("cursor","move").draggable("destroy").draggable({ 
      revert:  "false", 
      appendTo: 'body', 
      cursor:  "move", 
      cursorAt: { 
          top: 10, 
          left: -5 
         }, 
      helper:  function(event) { 

          //get a hold of the row id 
          var rowId = $(this).attr('id'); 

          //use the row id you found to get the column text; by using the getCell method as below, 
          //the 'unformatter' on that column is called; so, if value was formatted using a 
          //formatter, this method will return the unformatted value 
          //(as long as you defined an unformatter/using a built-in formatter) 
          var theValue = $searchResultsGrid.jqGrid('getCell', rowId, 'desiredValue'); 

          //set the data on this to the value to grab when you drop into input box 
          $(this).data('colValue', theValue); 

          return $("<div class='draggedValue ui-widget-header ui-corner-all'>" + theValue+ "</div>"); 
         }, 
      start:  function(event, ui) { 
          //fade the grid 
          $(this).parent().fadeTo('fast', 0.5); 
         }, 
      stop:  function(event, ui) { 
          $(this).parent().fadeTo(0, 1); 
         } 
     }); 
    } 

Quindi, creare elementi droppable:

function createDroppableElements() { 

    $("#inputFieldOne, #inputFieldTwo").droppable({ 
     tolerance: 'pointer', 
     hoverClass: 'active', 
     activate: function(event, ui) { 
         $(this).addClass("over"); 
        }, 
     deactivate: function(event, ui) { 
         $(this).removeClass("over"); 
        }, 

     drop:  function(event, ui) { 
         var theValue = ui.draggable.data('colValue'); 
         theValue = theValue .replace(/<br>/gi,'; '); 
         console.log("dropped value: " + theValue); 

         updateText($(this), theValue); 
        } 
    }); 
} 

Creare un metodo di supporto per aggiungere testo a testo campo (che si aggiunge a ";"):

function updateText(txtTarget, theValue) { 

    var currentValue = txtTarget.val().trim(); 

    if (currentValue.length > 0 
     && currentValue.substr(currentValue.length-1) !== ";") 
     currentValue = currentValue + '; '; 

    currentValue += theValue; 


    txtTarget.val(currentValue); 
}