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

问题描述

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

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

您会看到使用该演示第一次看到一切都正确，但是在更改页面，对列进行排序或对网格进行任何其他刷新之后，网格将被错误地填充.问题的原因是，仅当带有multiselect-checkboxes的列是第一个网格列中的一个时，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中还有其他代码位置.因此，要完全支持multiselect复选框，必须对所有功能进行更改.

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"类的其他行应移动.因此，演示的完整代码将

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屋！