在 jqGrid 中拖动行

Question

我想在 jqGrid 中实现可拖动的行功能，它也可以使用选项

$('#MyGrid').jqGrid('gridDnD', { 
connectWith: '#MyGrid2'}); 

现在，我的客户想在目标网格行中显示“拖动此处”文本，该文本将在该行从现有拖动到新行的位置，如何在将行从源拖动到目标时显示此文本？任何帮助表示赞赏...

Answer 1

我觉得你的问题很有趣。所以我从the answer 修改了旧的演示并创建了the demo，它演示了一个可能的实现。放置时的网格如下图所示：

它使用以下代码

$("#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)});
    }
});

我为网格左侧的工具提示“Drag here ↣”保留了一些位置，并在移动的行下方另外标记了该行，以使拖放行的位置基本清晰。我使用了free jqGrid，它支持"afterSelected" 和"beforeSelected" 的位置addRowData 最初在the answer 中建议。所以我使用了droppos: "afterSelected"。删除的行将插入所选行之后。