jQGrid拖放到DIV

Question

我有我的jQGrid拖放到另一個jQGrid，但有沒有辦法將一行拖到DIV和append()該行的ID到DIV中？

Answer 1

我已經創建了一個工作jsfiddle - 檢查這一點。 http://jsfiddle.net/NishitDhakar/skJa5/

var data = [[48803, "DSK1", "02200220", "OPEN"], [48769, "APPR", "77733337", "ENTERED"], [48813, "DSK1", "02200220", "OPEN"], [58769, "APPR", "77733337", "ENTERED"]]; 

$("#grid").jqGrid({ 
    datatype: "local", 
    height: 250, 
    colNames: ['Inv No', 'Portfolio Details', 'Number', 'Status'], 
    colModel: [{ 
     name: 'id', 
     index: 'id', 
     width: 60, 
     sorttype: "int"}, 
    { 
     name: 'Portfolio', 
     index: 'Portfolio', 
     width: 90, 
     sorttype: "date"}, 
    { 
     name: 'number', 
     index: 'number', 
     width: 80, 
     sorttype: "float"}, 
    { 
     name: 'status', 
     index: 'status', 
     width: 80, 
     sorttype: "float"} 
    ], 
    caption: "Drag Drop Example", 
}); 

var names = ["id", "Portfolio", "number", "status"]; 
var mydata = []; 

for (var i = 0; i < data.length; i++) { 
    mydata[i] = {}; 
    for (var j = 0; j < data[i].length; j++) { 
     mydata[i][names[j]] = data[i][j]; 
    } 
} 

for (var i = 0; i <= mydata.length; i++) { 
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]); 
} 

$("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}}); 
$("#grid").jqGrid('setGridParam', {gridComplete: makeGridRowsDraggable($("#" + this.id))}); 




function makeGridRowsDraggable(grid) { 
    createDroppableElements(); 
    $("#grid").val(new Date().getTime()); 
    var $searchResultsGrid = grid; 
    var searchResultsRows = $("#grid .ui-row-ltr"); 

    searchResultsRows.draggable({ appendTo: "body" }); searchResultsRows.draggable({ 
     create: function (event, ui) { } 
    }); 

    searchResultsRows.css("cursor", "move").draggable("option", "helper", "clone").draggable({ 
     revert: "true", 
     appendTo: 'body', 
     cursor: "move", 
     snap: "true", 
     cursorAt: { 
      top: 10, 
      left: -5 
     }, 
     helper: function (event) { 
      //get a hold of the row id 
      var rowId = $(this).attr('id'); 

      //my code 
      var rowData = jQuery("#grid").getRowData(rowId); 
      Id = "Portfolio ID : " + parseInt(rowData['id']); 
      //set the data on this to the value to grab when you drop into input box 
      $(this).data('colValue', Id); 
      var dialog = ($('#DragableWidget').length > 0) ? $('#DragableWidget') : 
         $('<div id="DragableWidget" class="draggedValue ui-widget-header ui-corner-all"></div>').appendTo('body'); 
      dialog.html(Id); 
    return dialog; 
     } 
     , start: function (event, ui) { 
      //fade the grid 
      $(this).parent().fadeTo('fast', 0.5); 
     } 
     , stop: function (event, ui) { 
      $(this).parent().fadeTo(0, 1); 
     } 
    }); 
} 

function createDroppableElements() { 
    $("#txtinputFieldOne, #txtinputFieldTwo").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'); 
      updateTextValue($(this), theValue); 
     } 
    }); 
} 

function updateTextValue(txtTarget, theValue) { 
    txtTarget.val(theValue); 
}