Я нахожу вас интересным вопросом, но ответ не так прост. Проблема в том, что 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");
В коде я использую некоторые другие классы и внутренние структуры сетки, объясненные, например, здесь . Другой ответ может дать дополнительную информацию.