如何将第一个td移动到tr中的最后一个
我有一个jqgrid，在设置multicheck时我得到第一列的复选框，我希望该复选框列是最后一列。
我没有找到任何选项，所以我正在编写一个自定义的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 } }
请帮忙。
有什么理由那么复杂吗？ 这应该这样做：
$('tr').each(function(){ $('td:first',this).remove().insertAfter($('td:last',this)); });
实例： http ： //jsfiddle.net/QEuxN/1/
我发现你的问题很有趣，但答案并不那么容易。 问题是jqGrid在某些地方使用colModel列的索引来查找列值。 因此，如果只是在网格的每一行内移动
元素，您将在网格中显示正确的信息，但网格将不可编辑 。 没有编辑模式可以使用网格。
下一个问题。 在您的示例中，您使用'td:first'来获取带有复选框的单元格。 在使用rownumbers: true会出错rownumbers: true选项。 如果复选框将位于第二列而不是第一列。
使用colModel重新排序列的remapColumns方法是使用remapColumns方法
$("#list").jqGrid('remapColumns', [0,2,3,4,...,1], true, false);
你看一下使用它的演示 ，你会看到第一次一切都正确，但是在更改页面，排序列或任何其他网格刷新后，网格将被填充错误。 问题的原因是jqGrid的当前代码仅在具有multiselect-checkboxes的列是第一个网格列中的一个时才起作用。 查看代码片段 ，例如：
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之后， colModel数组的索引中的用法gi+si+ni将不起作用。 addXmlData ， addJSONData ， addRowData的grid.base.js还有其他代码。 因此，要完全支持多选复选框，必须在所有function中进行更改。
如果您只需要在网格中显示数据而不进行编辑，我可以建议您看起来效果很好的解决方案。 看演示 。 在发布任何代码之前，我先解释一下代码中应该做什么。
网格主体总是有一个隐藏行（ 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");
在代码中，我使用了一些其他类和内部网格结构，例如这里解释。 另一个答案可以提供更多信息。