Bir JQGrid satırını gridDnD eklentisini kullanarak atılabilir bir metin alanına sürüklemenin bir yolu var mı?

Question

Bir satırın JQGrid'den bir metin giriş alanına sürüklenmesini ve bir sütunun metnini, bırakılan satırdan girişteki metnin sonuna kadar eklemek istiyorum.

Açıkçası bu cevabı uzun bir yol olduğunu, ancak bu bir tablodan bir satır sürükleyerek (#inputTextField bir 'droppable' metin alanı olduğu) JavaScript hatası sonuçları this.p is undefined üzerine kurulmuş:

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

Bunun nedeni, hedefin açıkça bir JQGrid olmaması ve this.p tanımlı olmamasıdır. Birkaç farklı şeyi denedim ... belki de damla olayını işe yaratabilmem için bir yol var mı? Herhangi bir yardım için çok teşekkür ederim :)

Answer 1

Bunu çözdüm! Birincisi, ızgara satırlar sürüklenebilir yapmak (bu fonksiyonun gridComplete ızgara olay işleyicisi çağrılmalıdır):

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

Sonra droppable unsurlar oluşturun:

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

metne metin ekleyin için bir yardımcı yöntemi oluşturun alan (sonek ekleme ';'):

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