Как заменить remapColums с remapColumnsByName в бесплатной jqgrid

Как заменить remapColums с remapColumnsByName в бесплатной jqgrid

Прежде всего хочу отметить, что код, описанный в старом ответе, работает не всегда корректно. Чтобы объяснить проблему, вы можете, например, открыть демонстрационную программу выбора одной строки и несколько раз использовать средство выбора столбцов перед перезагрузкой сетки. Например, вы можете сначала открыть окно выбора столбцов и изменить положение столбца «Клиенты» после столбца «Налог». Вы увидите правильные результаты в сетке. Затем вы можете еще раз открыть окно выбора столбцов и переместить столбец «Дата» после столбца «Клиенты», например. Вы увидите столбцы в порядке «Сумма», «Налог», «Клиент», «Дата», … Теперь вы можете перезагрузить страницу. Вы увидите, что загруженная страница имеет неправильный порядок столбцов: «Клиент», «Сумма», «Налог», «Дата», … Причина проблемы: permutation используемая remapColumns столбцов или remapColumns использует целочисленную позицию столбцы относительно текущего порядка столбцов . Это делает сохранение порядка столбцов более сложным. Нужно сохранить исходный порядок столбцов и всегда пересчитывать значения от массива permutation до переупорядочения исходного colModel .

В качестве альтернативы можно сохранить имена столбцов вместо массивов с измененным положением столбца относительно исходной модели столбца. Другими словами, следует заменить свойство permutation columnsState на что-то вроде cmOrder с массивом имен столбцов в сетке, который выбирал пользователь в последний раз.

Метод remapColumnsByName очень прост. Он работает как метод remapColumns , но его первым параметром является массив имен столбцов, а не массив целочисленных индексов.

Демонстрация — это быстрое и грязное изменение демонстрации выбора одной строки, чтобы использовать свойство cmOrder вместо свойства permutation в columnsState и дополнительно использовать метод remapColumnsByName . Если вы повторите тот же тест, который я описал в начале моего ответа, вы увидите, что в новой демоверсии нет ошибки, описанной выше.

Наиболее важные части демо, которые отличаются от оригинальной демоверсии, вы найдете ниже:

 var getColumnNamesFromColModel = function () { var colModel = this.jqGrid("getGridParam", "colModel"); return $.map(colModel, function (cm, iCol) { // we remove "rn", "cb", "subgrid" columns to hold the column information // independent from other jqGrid parameters return $.inArray(cm.name, ["rn", "cb", "subgrid"]) >= 0 ? null : cm.name; }); }, saveColumnState = function () { var p = this.jqGrid("getGridParam"), colModel = p.colModel, i, l = colModel.length, colItem, cmName, postData = p.postData, columnsState = { search: p.search, page: p.page, rowNum: p.rowNum, sortname: p.sortname, sortorder: p.sortorder, cmOrder: getColumnNamesFromColModel.call(this), selectedRows: idsOfSelectedRows, colStates: {} }, colStates = columnsState.colStates; if (postData.filters !== undefined) { columnsState.filters = postData.filters; } for (i = 0; i < l; i  ) { colItem = colModel[i]; cmName = colItem.name; if (cmName !== "rn" && cmName !== "cb" && cmName !== "subgrid") { colStates[cmName] = { width: colItem.width, hidden: colItem.hidden }; } } saveObjectInLocalStorage(myColumnStateName(this), columnsState); }, ... 

более того, loadComplete вызов loadComplete который восстанавливает порядок столбцов, следующий

 loadComplete: function () { var $this = $(this), p = $this.jqGrid("getGridParam"), i, count; if (firstLoad) { firstLoad = false; if (isColState && myColumnsState.cmOrder != null && myColumnsState.cmOrder.length > 0) { // We compares the values from myColumnsState.cmOrder array // with the current names of colModel and remove wrong names. It could be // required if the column model are changed and the values from the saved stated // not corresponds to the var fixedOrder = $.map(myColumnsState.cmOrder, function (name) { return p.iColByName[name] === undefined ? null : name; }); $this.jqGrid("remapColumnsByName", fixedOrder, true); } if (typeof (this.ftoolbar) !== "boolean" || !this.ftoolbar) { // create toolbar if needed $this.jqGrid("filterToolbar", {stringResult: true, searchOnEnter: true, defaultSearch: myDefaultSearch}); } } refreshSerchingToolbar($this, myDefaultSearch); for (i = 0, count = idsOfSelectedRows.length; i < count; i  ) { $this.jqGrid("setSelection", idsOfSelectedRows[i], false); } saveColumnState.call($this, this.p.remapColumns); }, 

Я хочу повторить, что код из новой демонстрации далеко не идеален. Я просто использовал старый код и исправил его, чтобы он работал в бесплатной jqGrid и с помощью нового метода remapColumnsByName .

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector