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

Question

我有一个jqgrid,设置multiheck我得到第一列的复选框,我希望复选框列是最后一列.

我发现它没有选择,所以我写一个自定义的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);

你看看使用它的演示,你会看到第一次一切正确,但是在更改页面,排序列或任何其他网格刷新后,网格将被填错.问题的原因是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;
    ...
}

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

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

网格主体总是有一个隐藏的行(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");

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