Question

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

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

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

Answer 1

我觉得你的问题很有意思。所以我修改了the answer中的旧演示并创建了the demo，演示了可能的实现。丢弃期间的网格如下图所示：

enter image description here

它使用以下代码

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

我为网格左侧的工具提示“拖到这里↣”保留了一些位置，并在移动的行下标记了行，以使得删除行的位置大部分清晰。我使用free jqGrid支持"afterSelected"和"beforeSelected" addRowData最初在the answer中建议的位置。所以我使用了droppos: "afterSelected"。删除的行将在所选行之后插入。

在jqGrid中拖动行

1 个答案: