Czy istnieje sposób przeciągania wiersza z JQGrid do droppable textfield przy użyciu wtyczki gridDnD?

Question

Chciałbym przeciągnąć wiersz od JQGrid do pola wprowadzania tekstu i dodać tekst kolumny od zrzuconego wiersza na koniec tekstu na wejściu.

Oczywiście jest to daleko od odpowiedzi, ale przeciąganie wiersz z siatki z tego skonfigurować na nim (gdzie #inputTextField jest „droppable” pole tekstowe) wyniki w błąd JavaScript this.p is undefined:

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

to dlatego, że odbiorca nie jest oczywiście jqGrid i nie ma this.p zdefiniowane. Próbowałem kilku różnych rzeczy ... może jest jakiś sposób, żeby "oszukać" działanie dropu? Dziękuję bardzo za pomoc :)

Answer 1

wyobraziłem go !! Po pierwsze, upewnij wiersze grid przeciągany (ta funkcja powinna zostać wywołana w gridComplete obsługi zdarzeń grid):

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

Następnie utwórz elementy 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); 
        } 
    }); 
} 

Tworzenie metody pomocnika aby dołączyć tekst na tekst pole (dołączenie kończące '' '):

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