Question

我想知道jqGrid是否具有内置的“行交换”功能。

有一段时间我在互联网上寻找它，但到目前为止没有运气。

但类似的功能是（没有任何问题可以用于行交换）; DnD和sortableRows;

sortableRows只会改变行的顺序，无法直观地为用户实现交换。

在DnD中，为了使其最佳工作，您需要将目标分配给另一个HTML元素或另一个jqGrid。但是，如果将其设置为相同的jqGrid（以模拟行交换），则不允许它。

提前致谢。

Answer 1

通常使用按某些列排序的网格。在重新排序或交换行的情况下没有任何意义。如果您有未排序的网格并且需要交换行，则可以尝试使用jQuery.detach方法从网格中临时删除行，然后使用jQuery.before，jQuery.after，jQuery.insertAfter或{ {3}}在新位置插入分离的行。

更新：jQuery.insertBefore演示网格中The corresponding demo的使用情况。它有行ids“10”，“20”，“30”，“40”，......

我在演示中包含了两个按钮（id =“move”和id =“swap”）。第一个按钮执行简单的无条件工作：它将id =“10”的行分离，并将其放在id =“40”的行之前。

第二个按钮使用insertAfter或insertBefore方法交换带有“10”和“20”的行。由于网格中两行的不同位置，因此不能使用该方法。另外，如果具有ids“10”和“20”的行是一个在另一个上，则只需要进行一次行移动。我试图考虑所有的情况。您将在下面看到相应的代码。我想可以编写更优化的代码，但下面包含的代码似乎仍能正常工作：

$("#move").button().click(function () {
    var $row = $("#10").detach();
    $row.insertBefore("#40");

    $(this).button("disable");
});
$("#swap").button().click(function () {
    var $row1 = $("#10"), $row2 = $("#20"),
        $next1 = $row1.next(".jqgrow"), $prev1 = $row1.prev(".jqgrow"),
        $next2, $prev2, doOneMove = false, movedOnce = false;

    if ($row2.is($next1) || $prev1.is($row2)) {
        doOneMove = true;
    }

    if ($prev1.length > 0 && !$prev1.is($row2)) {
        $row2.detach().insertAfter($prev1);
        movedOnce = true;
    } else if ($next1.length > 0 && !$next1.is($row2)) {
        $row2.detach().insertBefore($next1);
        movedOnce = true;
    }

    if (doOneMove && movedOnce) {
        return;
    }

    $next2 = $row2.next();
    $prev2 = $row2.prev();
    if ($prev2.length > 0 && !$prev2.is($row1)) {
        $row1.detach().insertAfter($prev2);
    } else if ($next2.length > 0 && !$next2.is($row1)) {
        $row1.detach().insertBefore($next2);
    }
});

Answer 2

我希望这就是你要找的东西：

http://jsfiddle.net/netroworx/6wMm7/

代码：

$(document).ready(function() {
jQuery("#mytable").jqGrid({
  datatype:"clientSide",
  data:[ {"number": 1, "segment":"first", "name": "chap0"},
         {"number": 2, "segment":"second",  "name": "chap1"},
         {"number": 3, "segment":"third",  "name": "chap2"},
       ],
  colNames:['Chapter Name', 'Chapter Number', 'Document Segment'],
  colModel:[
          {name:'name'},
          {name:'number', sorttype:'number'},
          {name:'segment'},
          ],
  autowidth:true,
  height:'200',
  sortname: 'number',
  viewrecords: true,
  caption: 'My first grid',
  altRows:true

}); 
jQuery("#mytable").sortableRows();   
jQuery("#mytable").jqGrid('gridDnD');

    });

Answer 3

如果您只关心交换相邻的行，则以下代码将起作用。基本上它会向上或向下移动当前的行。

function moveCurrentRowJQGrid(grid, moveUP) {
    var key = grid.jqGrid('getGridParam', 'selrow');
    if (!key) return;
    var row = $('#'+ key);
    if (moveUP) {
        var prev = row.prev('.jqgrow');
        if (prev.length > 0) {
            row.detach().insertBefore(prev);
            return 1;
        }
    }
    else {
        var next = row.next('.jqgrow');
        if (next.length > 0) {
            row.detach().insertAfter(next);
            return 1;
        }
    }
}

如果成功则返回1，或者在失败时返回未定义（例如，您尝试将第一行移动）。

jqGrid有行交换功能吗？

3 个答案: