有沒有辦法使用gridDnD插件將一行從JQGrid拖到可放置的文本字段？

Question

我想從JQGrid拖動一行到一個文本輸入字段，並將一個列的文本從被刪除的行添加到輸入文本的末尾。

顯然，這是從答案很長的路要走，但是從電網拖着一排這個設置就可以了（其中#inputTextField是「投擲的」文本字段）this.p is undefined導致JavaScript錯誤：

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

這是因爲目的地顯然不是JQGrid，並且沒有定義this.p。我已經嘗試了一些不同的東西......也許有一種方法可以讓滴漏事件「投入」工作？非常感謝你的幫助:)

Answer 1

我想通了！首先，使網格行拖動（這個功能應該在你的gridComplete電網事件處理函數中調用）：

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

然後，創建可放開要素：

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

創建一個輔助方法來追加文本到文本字段（追加';'）：

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