问题
I want to implement draggable rows feature in jqGrid and it's working also using option
$('#MyGrid').jqGrid('gridDnD', {
connectWith: '#MyGrid2'});
Now, my client want to show "Drag here" text in target grid row at the position where the row will be dragged from existing to new one, how can I show this text while dragging row from source to target? Any help is appreciated...
回答1:
I find your question interesting. So I modified the old demo from the answer and created the demo which demonstrates a possible implementation. The grid during dropping looks like on the picture below:
It uses the following code
$("#grid1").jqGrid("gridDnD", {
connectWith: "#grid2",
drop_opts: {
activeClass: "",
hoverClass: ""
},
onstart: function (ev, ui) {
ui.helper.addClass("ui-widget ui-widget-content")
.css({
"font-size": "11px",
"font-weight": "normal"
});
},
onstop: function (ev, ui) {
$("#dragHelper").hide();
},
droppos: "afterSelected", // "beforeSelected"
beforedrop: function (e, ui, getdata, $source, $target) {
var names = $target.jqGrid("getCol", "name2");
if ($.inArray(getdata.name2, names) >= 0) {
// prevent data for dropping
ui.helper.dropped = false;
alert("The row \"" + getdata.name2 + "\" is already in the destination grid");
}
$("#dragHelper").hide();
$("#grid2").jqGrid("setSelection", this.id, true, e);
},
ondrop: function (ev, ui, getdata) {
var selRow = $("#grid2").jqGrid("getGridParam", "selrow"),
$tr = $("#" + $.jgrid.jqID(selRow));
if ($tr.length > 0) {
$("#grid2").jqGrid("setSelection", $("#grid2")[0].rows[$tr[0].rowIndex + 1].id, true);
}
}
});
// make every row of the destination grid droppable and select row on over
$("#grid2 tr.jqgrow").droppable({
hoverClass: "ui-state-hover",
over: function (e, ui) {
$("#grid2").jqGrid("setSelection", this.id, true, e);
$("#dragHelper").show().position({my: "right center", at: "left bottom", of: $(this)});
}
});
I reserve some place for the tooltip "Drag here ↣" on the left of the grid and marked the row under the moved row additionally to make the position of the dropped row mostly clear. I used free jqGrid which have support of "afterSelected"
and "beforeSelected"
position of addRowData
originally suggested in the answer. So I used droppos: "afterSelected"
. The dropped rows will be inserted after the selected row.
来源:https://stackoverflow.com/questions/30776569/drag-rows-in-jqgrid