Có cách nào để kéo một hàng từ một JQGrid vào một textfield có thể phân tách bằng cách sử dụng plugin gridDnD không?

Question

Tôi muốn kéo một hàng từ một trường JQGrid vào trường nhập văn bản và thêm văn bản của cột từ hàng đã được thả vào cuối văn bản trong đầu vào.

Rõ ràng đây là một chặng đường dài từ câu trả lời, nhưng kéo một hàng từ một mạng lưới với điều này thiết lập trên đó (nơi #inputTextField là một lĩnh vực văn bản 'droppable') kết quả trong lỗi JavaScript this.p is undefined:

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

Điều này là do đích rõ ràng không phải là JQGrid và không được định nghĩa this.p. Tôi đã thử một vài điều khác nhau ... có lẽ có một cách tôi có thể 'lừa' sự kiện thả vào hoạt động? Cảm ơn bạn rất nhiều vì đã giúp đỡ :)

Answer 1

Tôi đã tìm ra !! Trước tiên, hãy các hàng lưới kéo (chức năng này nên được gọi là trong gridComplete xử lý sự kiện lưới của bạn):

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

Sau đó, tạo yếu tố 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); 
        } 
    }); 
} 

Tạo một phương thức helper để thêm văn bản vào văn bản trường (chắp thêm dấu ';'):

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