Question

我有一个jqgrid，在设置multicheck时我得到第一列的复选框，我希望该复选框列是最后一列。

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

我正在尝试使用

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>元素，您将在网格中显示正确的显示信息，但网格不可编辑。没有编辑模式可以使用网格。

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

使用colModel重新排列列的最佳方法是使用remapColumns方法，如

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

你看the demo使用它你会看到第一次一切都正确，但是在更改页面，排序列或任何其他网格刷新后，网格将被填错。问题的原因是jqGrid的当前代码仅在具有multiselect-checkboxes的列是第一个网格列中的一个时才起作用。以the code fragment为例：

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;
    ...
}

重新排序gi+si+ni后，colModel数组索引中的使用colModel将无效。在addXmlData的{{1}}，addJSONData，addRowData内还有其他代码。因此，要完全支持多选复选框，必须对所有功能进行更改。

如果您需要只显示网格中的数据而不进行编辑我可以建议您看起来效果很好的解决方案。见the demo。在发布任何代码之前，我先解释一下代码中应该做些什么。

网格主体总是有一个隐藏行（grid.base.js），用于设置列宽。一次应该改变行一次行中的顺序。此外，必须更改列标题中的列顺序（如果存在，则包括the searching toolbar）和页脚（摘要）行（如果存在）。

网格主体的所有其他行应在每个网格刷新上记录。因此，应该在tr.jqgfirstrow或loadComplete事件处理程序中执行此操作。函数gridComplete

getColumnIndexByName

可用于通过复选框获取列'cb'的索引。

要在表格中移动列，我使用了以下函数

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; };

可以移动表的所有行的所有列，也可以只移动具有特定类的行。具有“jqgfirstrow”类的行应该移动一次，并且具有“jqgrow”类的其他行应该在每个网格刷新上移动。因此the demo的完整代码将是

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]); } } };

在代码中，我使用了一些其他类和内部网格结构，例如here。 Another answer可以提供其他信息。

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

2 个答案: