如何将第一个 td 移动到最后一个 tr [英] how to move a first td to last in a tr

问题描述

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

I have a jqgrid, on setting multicheck I am getting the checkbox on first column, I want that checkbox column to be the last column.

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

I found no option on it, so I am writing a custom jquery method to move the first td of the tr to last.

我正在尝试使用

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

请帮忙.

推荐答案

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

I find you question interesting, but the answer is not so easy. The problem is that jqGrid use the index of colModel column in some places to find the column value. So if one just move <td> elements inside of every row of the grid you will have correct information displayed in the grid, but the grid will be not editable. No editing mode will work with the grid.

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

Next problem. In the your example you used 'td:first' to get the cell with the checkbox. It will be wrong in case of usage of rownumbers: true option. In the case the checkbox will be in the second and not the first column.

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

The most good way to reorder the columns together with colModel will be the usage of remapColumns method like

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

如果你看一下demo，你就会第一次看到一切都是正确的，但是在更改页面、排序列或任何其他网格刷新后，网格将被错误填充.问题的原因是 jqGrid 的当前代码仅在具有多选复选框的列是第一个网格列中的一个时才有效.查看代码片段示例:

It you look at the demo which use this you will see that everything is correct at the first time, but after changing the page, sorting a column or any other refreshing of the grid the grid will be wrong filled. The reason of the problem is that the current code of jqGrid works only if the column with multiselect-checkboxes is one from the first grid columns. Look at the code fragment for example:

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里面还有其他地方的代码.因此，要完全支持多选复选框，必须对所有功能进行更改.

The usage gi+si+ni in the index of colModel array will not work after reordering of colModel. There are other places of code inside of addXmlData, addJSONData, addRowData of grid.base.js. So to have full support of the multiselect-checkboxes one have to make changes in all the functions.

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

If you need only display the data in the grid without editing I can suggest you solution which looks to work good. See the demo. Before posting any code I explain you what should be done in the code.

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

The body of grid has always one hidden row (tr.jqgfirstrow) which will be used to set the column width. One should change the order in the columns in the row once time. Additionally one have to change the order of columns in the column headers (including the searching toolbar if it exists) and the footer (summary) row if any exist.

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

All other rows of the grid body should be recorded on every grid refreshing. So one should do this inside of loadComplete or gridComplete event handler. The function 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'的索引.

can be used to get the index of the column 'cb' with the checkboxes.

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

To move column inside of the table I used the following function

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"类的其他行应在每次刷新网格时移动.所以 demo 的完整代码将是

which can move either all columns of all rows of the table or only the rows having specific class. The row having "jqgfirstrow" class should be moved once and other rows having "jqgrow" class should be moved on every grid refreshing. So the full code from the demo will be

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");

在代码中，我使用了一些其他类和内部网格结构，例如 这里.另一个答案可以提供更多信息.

In the code I use some other classes and internal grid structures explained for example here. Another answer can gives additional information.

这篇关于如何将第一个 td 移动到最后一个 tr的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！