Как переместить первый тд в последний в тр

У меня есть jqgrid, при установке нескольких проверок я получаю флажок в первом столбце, я хочу, чтобы этот столбец флажок был последним столбцом.

Я не нашел никакой опции, поэтому я пишу собственный метод 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
    }
}

Пожалуйста помоги.

Источник

2 ответа

Я нахожу ваш вопрос интересным, но ответ не так прост. Проблема в том, что jqGrid использует индекс colModel столбец в некоторых местах, чтобы найти значение столбца. Так что, если просто двигаться <td> элементы внутри каждой строки сетки, у вас будет правильная информация, отображаемая в сетке, но сетка будет недоступна для редактирования. Никакой режим редактирования не будет работать с сеткой.

Следующая проблема В вашем примере вы использовали 'td:first' чтобы получить ячейку с флажком. Это будет неправильно в случае использования rownumbers: true вариант. В случае, если флажок будет во втором, а не в первом столбце.

Самый хороший способ изменить порядок столбцов вместе с colModel будет использование remapColumns метод как

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

Если вы посмотрите на демо, которое использует это, вы увидите, что все правильно с первого раза, но после изменения страницы, сортировки столбца или любого другого обновления сетки сетка будет заполнена неправильно. Причина проблемы заключается в том, что текущий код jqGrid работает только в том случае, если столбец с флажками multiselect является одним из первых столбцов сетки. Посмотрите на фрагмент кода, например:

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, Таким образом, для полной поддержки флажков multiselect необходимо внести изменения во все функции.

Если вам нужно только отобразить данные в сетке без редактирования, я могу предложить вам решение, которое выглядит хорошо. Смотрите демо. Перед публикацией любого кода я объясню вам, что должно быть сделано в коде.

Тело сетки всегда имеет один скрытый ряд (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");

В коде я использую некоторые другие классы и внутренние структуры сетки, объясненные, например, здесь. Другой ответ может дать дополнительную информацию.

Источник

Любая причина, почему это так сложно? Это должно сделать это:

$('tr').each(function(){
    $('td:first',this).remove().insertAfter($('td:last',this));
});

Живой пример: http://jsfiddle.net/QEuxN/1/

Источник
Другие вопросы по тегам