如何将第一个 td 移到 tr 中的最后一个

Question

我有一个 jqgrid，在设置多重检查时，我在第一列上获得复选框，我希望该复选框列成为最后一列。

我没有找到它的选项，所以我正在编写一个自定义 jquery 方法来将 tr 的第一个 td 移动到最后。

我正在尝试使用

loadcomplete:function{
    var row = $(".cbox");
    for (var i = 0; i < row.length; i++) {
        var tr = $(row[i]).parent().parent().parent();
        var td = $(row[i]).parent().parent();
        var newtd = $(td).clone(true);
        $(tr).append($(newtd));
        $(tr).remove($(td)); // i am getting exception here
    }
}

请帮助。

Answer 1

有什么理由这么复杂吗？这应该可以做到：

$('tr').each(function(){
    $('td:first',this).remove().insertAfter($('td:last',this));
});

实例： http://jsfiddle.net/QEuxN/1/

Answer 2

我发现你的问题很有趣，但答案并不那么容易。问题是jqGrid在某些地方使用colModel列的索引来查找列值。因此，如果只需将 元素移动到网格的每一行内，您将在网格中显示正确的信息，但网格将不可编辑。。任何编辑模式都不适用于网格。

下一个问题。在您的示例中，您使用 'td:first' 来获取带有复选框的单元格。如果使用 rownumbers: true 选项，则会出错。在这种情况下，复选框将位于第二列而不是第一列。

与 colModel 一起重新排序列的最好方法是使用 remapColumns 方法，就像

$("#list").jqGrid('remapColumns', [0,2,3,4,...,1], true, false);

您查看的 使用此的演示，您会看到第一次一切都是正确的，但是在更改页面、对列进行排序或任何其他刷新网格，网格将被错误填充。问题的原因是 jqGrid 的当前代码仅当具有多选复选框的列是第一个网格列中的一个时才起作用。查看代码片段例如：

refreshIndex = function() {
    ...
    ni = ts.p.rownumbers===true ? 1 :0,
    gi = ts.p.multiselect ===true ? 1 :0,
    si = ts.p.subGrid===true ? 1 :0;
    ...
        idname = ts.p.colModel[ts.p.keyIndex+gi+si+ni].name;
    ...
}

colModel数组索引中的用法gi+si+ni在colModel重新排序后将不起作用。 grid.base.js 的 addXmlData、addJSONData、addRowData 内部还有其他代码位置。因此，要完全支持多选复选框，必须对所有功能进行更改。

如果您需要仅显示网格中的数据而不进行编辑我可以建议您看起来效果不错的解决方案。请参阅演示。在发布任何代码之前，我会向您解释代码中应该做什么。

网格主体始终有一个隐藏行 (tr.jqgfirstrow)，用于设置列宽。应一次更改行中各列的顺序。此外，还必须更改列标题中的列顺序（包括 搜索工具栏（如果存在）和页脚（摘要）行（如果存在）。

网格体的所有其他行都应在每次网格刷新时记录。因此，应该在 loadComplete 或 gridComplete 事件处理程序内部执行此操作。函数getColumnIndexByName

var getColumnIndexByName = function ($grid, columnName) {
        var colModel = $grid.jqGrid('getGridParam', 'colModel'), i = 0,
            cmLength = colModel.length;
        for (; i < cmLength; i += 1) {
            if (colModel[i].name === columnName) {
                return i;
            }
        }
        return -1;
    };

可用于获取带有复选框的列“cb”的索引。

为了移动表内的列，我使用了以下函数

var moveTableColumn = function (rows, iCol, className) {
        var rowsCount = rows.length, iRow, row, $row;
        for (iRow = 0; iRow < rowsCount; iRow += 1) {
            row = rows[iRow];
            $row = $(row);
            if (!className || $row.hasClass(className)) {
                $row.append(row.cells[iCol]);
            }
        }
    };

，它可以移动表中所有行的所有列，也可以仅移动具有特定类的行。具有“jqgfirstrow”类的行应该移动一次，并且其他具有“jqgrow”类的行应该在每次网格刷新时移动。因此，演示中的完整代码将

var $htable, $ftable, iCheckbox, $myGrid = $("#list");

$myGrid.jqGrid({
    ... // jqGrid definition
    loadComplete: function () {
        if (typeof(iCheckbox) === "undefined") {
            iCheckbox = getColumnIndexByName($(this), 'cb');
        }
        if (iCheckbox >= 0) {
            // first we need to place checkboxes from the table body on the last place
            moveTableColumn(this.rows, iCheckbox, "jqgrow");
        }
    }
});

// if we has not local grid the iCheckbox variable can still uninitialized
if (typeof(iCheckbox) === "undefined") {
    iCheckbox = getColumnIndexByName($myGrid, 'cb');
}

// move column with chechboxes in all rows of the header tables
$htable = $($myGrid[0].grid.hDiv).find("table.ui-jqgrid-htable");
if ($htable.length > 0) {
    moveTableColumn($htable[0].rows, iCheckbox);
}

// move column with chechboxes in footer (summary)
$ftable = $($myGrid[0].grid.sDiv).find("table.ui-jqgrid-ftable");
if ($ftable.length > 0) {
    moveTableColumn($ftable[0].rows, iCheckbox);
}

// move column with chechboxes in footer in the first hidden column of grid
moveTableColumn($myGrid[0].rows, iCheckbox, "jqgfirstrow");

在我使用的代码中一些其他类和内部网格结构解释例如 此处。 另一个答案可以提供更多信息。