我使用jquery.tablednd.js来使jqGrid的行可拖动,实际上,我还在第一列的此表上设置了dragHandle。
这是我的代码:
var myGrid = $("#jqGrid");
myGrid.jqGrid({
mtype : "GET",
data : dataElements,
datatype : 'json',
...
gridComplete : function() {
$("#jqGrid").tableDnDUpdate();
$("#jqGrid .jqgrow").mouseover(function(e) {
var rowId = $(this).attr('id');
$("#jqGrid tr#"+rowId).find("td:first-child").addClass("showDragHandle");
});
$("#jqGrid .jqgrow").mouseleave(function(e) {
var rowId = $(this).attr('id');
$("#jqGrid tr#"+rowId).find("td:first-child").removeClass("showDragHandle");
});
$('#jqGrid-' + tableID+ ' tr td:first-child').addClass("dragHandle");
},
...
});
$("#jqGrid").tableDnD({
dragHandle: "dragHandle",
onDrop: function(table, row){
var arrayOrder =[];
var dataId = $("#jqGrid").jqGrid('getDataIDs');
for(i = 0; i<dataId.length; i++){
arrayOrder[i] = $("#jqGrid").jqGrid("getCell", dataId[i], 1);
}
changeOrder(arrayOrder, caracID);
}
});
CSS:
td.showDragHandle{
background-image: url(../images/updown2.gif);
font-family: glyphicon-move;
background-repeat: no-repeat;
background-position: center center;
cursor:move;
}
尽管在插件的最后一条注释中指定版本0.5包含一个校正,以使所有行都可拖动,但是即使我在最后一行X下方放置了另一行,我仍然总是遇到最后一行的问题,此行X始终不可拖动。
谢谢!
问题已解决:我已删除
$(“#jqGrid”)。tableDnDUpdate();
它正在工作。