Редактиране на клетка в jqGrid

Редактирането на клетка позволява на потребителя да променя съдържанието на една клетка подред, след което разработчикът има способността да обработва промени в данните с помощта на AJAX или в манипулатора на събития за редактиране на клетка (вижте по-долу).

Редактиране на клетки поддържа навигация с клавиатура и редактиране на една клетка със следното поведение:

Когато щракнете върху нередактируема клетка, клетката се маркира и можете да използвате левия и десния бутон за навигация през клетките.
Когато се премествате в клетка, която се редактира, можете да натиснете клавиша Enter, за да започнете да редактирате. Стойността в клетката се запазва, когато натиснете отново Enter, когато натиснете Tab или когато щракнете върху друга клетка. Когато натиснете Esc, клетката не се запазва. Когато редактирате клетка, клавишите със стрелки се движат само в клетката.
Когато кликнете върху редактируема клетка, ние веднага влизаме в режим на редактиране.
Клетката не може да се редактира, ако има клас 'not-editable-cell', вместо да задава свойството за редактиране в colModel.

За да използвате този модул, трябва да проверите Редактиране на клетки и Общи модули, когато изтегляте таблицата. Вижте статията "Инсталиране на jqGrid".

Разработчиците на приставки JQuery могат да използват файла grid.celledit.js в директорията src.

Свойствата, събитията и методите, използвани при редактиране на клетка, са изброени по-долу:

Тези свойства са специфични за редактирането на клетки и трябва да бъдат зададени в свойствата на таблицата.

Имот: cellEdit
Тип: булев
Активира/деактивира редактирането на клетки. Ако това свойство е зададено на true, тогава събитието onSelectRow не може да се използва и задържането е забранено (при преместване на курсора на мишката върху редове).
По подразбиране: невярно

Имот: клетъчно изпращане
Тип: низ
Определя къде да се запази съдържанието на клетката. Може да бъде една от двете стойности: 'remote' или 'clientArray' .
Ако е „отдалечен“, тогава съдържанието на клетката, ако се промени, незабавно се записва на сървъра с помощта на свойството cellurl и заявка AJAX. Идент. Ред и съдържанието на клетката се добавят към url по подразбиране. Ако свойството "mtype" е зададено на "POST", тогава двойките ключ-стойност се изпращат като параметри на заявката POST. Например, ако запазим клетка с име mycell, тогава < id: rowid, mycell: cellvalue >добавен към url.
Ако свойството cellubmit е зададено на 'clientArray', тогава не се изпращат заявки за AJAX и съдържанието на променената клетка може да бъде извлечено с помощта на метода getChangedCells или с помощта на събитието.
По подразбиране: "дистанционно"

Имот: cellurl
Тип: низ
URL за запазване на съдържанието на клетката. Това свойство трябва да се задава само когато cellubmit: 'отдалечен' .
По подразбиране: нула

Имот: ajaxCellOptions
Тип: обект
Това свойство ви позволява да зададете глобални настройки на AJAX за изпращане на данни към сървъра в режим на редактиране на клетки. Имайте предвид, че това свойство може да се използва за отмяна на всички текущи настройки на AJAX в заявката за запис, включително цялото събитие.
По подразбиране: празен обект

Когато използвате опцията „отдалечено“, можете да добавите следните редове към конфигурацията на таблицата:

Когато използвате ‘clientArray’ като свойство cellubmit, важни са само тези свойства:

Тези събития са свързани с редактиране на клетки и трябва да се използват в свойствата на таблицата.

Много от тези събития използват следните параметри:

rowid - идентификаторът на реда
cellname - име на клетка (име от colModel)
стойност - стойността в клетката
iRow - индекс на редове (да не се бърка с rowid)
iCol - индекс на колона

Събитие: afterEditCell
Параметри: rowid, име на клетка, стойност, iRow, iCol
Прилага се само за клетки, които могат да бъдат редактирани. Възниква след редактиране на клетка, тоест след вмъкване на елемент в DOM.

Събитие: afterRestoreCell
Тип: rowid, стойност, iRow, iCol
Прилага се само за клетки, които могат да бъдат редактирани. Възниква след извикване на метода restoreCell или потребителят натиска клавиша Esc, за да отхвърли промените.

Събитие: afterSaveCell
Параметри: rowid, име на клетка, стойност, iRow, iCol
Прилага се само за клетки, които могат да бъдат редактирани. Възниква след успешно запазване на клетка. Перфектното място за промяна на друго съдържание.

Събитие: afterSubmitCell
Параметри: сървър отговор, rowid, име на клетка, стойност, iRow, iCol
Прилага се само за клетки, които могат да бъдат редактирани. Възниква след изпращане на данни към сървъра. Трябва да върне масив от формата [успех (булево), съобщение]. Ако връща [true, "], значи всичко е наред и съдържанието е запазено успешно. Ако връща [false, „Съобщение за грешка“], тогава се появява диалогов прозорец със „Съобщение за грешка“ и съдържанието не се запазва. Параметърът на сървърния отговор е отговорът на сървъра. Трябва да използвате serverresponse.responseText, за да получите текстово съобщение от сървъра.

Събитие: beforeEditCell
Параметри: rowid, име на клетка, стойност, iRow, iCol
Прилага се само за клетки, които могат да бъдат редактирани. Възниква преди редактирането на клетката.

Събитие: beforeSaveCell
Параметри: rowid, име на клетка, стойност, iRow, iCol
Прилага се само за клетки, които могат да бъдат редактирани. Това събитие се задейства преди проверка на стойностите. Това събитие може да върне нова стойност, която ще замени редактираната.
beforeSaveCell: функция (rowid, celname, value, iRow, iCol) < if ( some _ condition ) < return "new value"; >>
Стойността ще бъде заменена с "нова стойност" .

Събитие: beforeSubmitCell
Параметри: rowid, име на клетка, стойност, iRow, iCol
Прилага се само за клетки, които могат да бъдат редактирани. Това събитие се задейства, преди съдържанието на клетката да бъде публикувано на сървъра (само за cellubmit: 'remote'). Може да върне нов масив, който ще бъде изпратен на сървъра.
beforeSubmitCell: функция (rowid, celname, value, iRow, iCol) < if ( some _ condition ) < return < name1: value1, name2: value2 >> друго < return < >>>
Върнатият масив ще бъде добавен към данните, изпратени до cellurl.

Събитие: errorCell
Параметри: отговор на сървъра, статус
Това събитие се поражда, когато възникне грешка в сървъра. Параметърът servereresponse е отговорът на сървъра. Трябва да използвате serverresponse.responseText, за да получите текстово съобщение от сървъра. Параметърът на състоянието е състоянието на грешката. Ако манипулаторът на събития не е инсталиран, се появява диалогов прозорец.

Събитие: formatCell
Параметри: rowid, име на клетка, стойност, iRow, iCol
Прилага се само за клетки, които могат да бъдат редактирани. Това събитие ви позволява да форматирате съдържанието на клетка преди редактиране и връща форматираната стойност.

Събитие: onSelectCell
Параметри: rowid, celname, стойност, iRow, iCol
Прилага се само за клетки, които не могат да бъдат редактирани. Възниква след избор на клетка.

Събитие: serializeCellData
Параметри: Публикувайте данни
Ако е зададено, това събитие може да сериализира данните, предадени на заявката AJAX, когато клетката е запазена. Функцията трябва да връща сериализирани данни. Това събитие може да се използва, когато искате да изпратите персонализирани данни на сървъра като JSON низ, XML низ и други формати. Това събитие получава данни, които ще бъдат изпратени до сървъра.

Ред на събитията

В зависимост от свойството cellubmit, зададено на 'remote' или 'clientArray', следните събития се задействат в следния ред:

Свойството Cellsumbit е „отдалечено“

formatCell(rowid, име на клетка, стойност, iRow, iCol) - Можете да промените стойността на клетката, която ще се използва в режим на редактиране
beforeEditCell(rowid, име на клетка, стойност, iRow, iCol) - Преди клетката да премине в режим на редактиране.
afterEditCell(rowid, име на клетка, стойност, iRow, iCol) - Събитието се случва след създаването на входния елемент.
beforeSaveCell(rowid, име на клетка, стойност, iRow, iCol) - Събитието се случва преди запазване на клетката, можете да промените стойността, която ще бъде изпратена до сървъра.
beforeSubmitCell(rowid, име на клетка, стойност, iRow, iCol) - Събитието се случва преди изпращане на сървъра, можете да добавите допълнителни параметри към заявката, като върнете масив.
afterSubmitCell(отговор на сървър, rowid, име на клетка, стойност, iRow, iCol) - Събитието се задейства само след изпращане на данните, можете да върнете съобщение за грешка, за да се покаже диалоговият прозорец.
afterSaveCell(rowid, име на клетка, стойност, iRow, iCol) - Събитието възниква след успешно запазване на стойността на клетката.
errorCell(отговор на сървъра, състояние) - Събитието възниква, когато възникне грешка на сървъра (кодове 403, 404, 500 и други)
onSelectCell(rowid, celname, value, iRow, iCol) - Възниква, когато клетката не може да се редактира.

Свойството на Cellsubmit е 'clientArray'

formatCell(rowid, име на клетка, стойност, iRow, iCol) - Можете да промените стойността на клетката, която ще се използва в режим на редактиране
beforeEditCell(rowid, име на клетка, стойност, iRow, iCol) - Преди клетката да премине в режим на редактиране.
afterEditCell(rowid, име на клетка, стойност, iRow, iCol) - Събитието се случва след създаването на входния елемент.
beforeSaveCell(rowid, име на клетка, стойност, iRow, iCol) - Събитието се случва, преди потребителят да запази клетката
beforeSubmitCell(rowid, име на клетка, стойност, iRow, iCol) - Тук можете да запазите някъде стойността.
afterSaveCell(rowid, име на клетка, стойност, iRow, iCol) - Изстрелва се, след като клетката е била успешно запазена в beforeSubmitCell
onSelectCell(rowid, celname, value, iRow, iCol) - Възниква, когато клетката не може да се редактира.

Всички методи по-долу трябва да бъдат приложени към обекта jqGrid и всички те връщат един и същ обект.

Метод: editCell
Параметри: iRow, iCol, редактиране
Принуждава редактирането на клетката с индекса iRow (да не се бърка с rowid) и индекса на колоната iCol. Ако редактирането е зададено на false, клетката просто се избира, но не се редактира. Ако редактирането е зададено на true, клетката се избира и преминава в режим на редактиране.

Метод: getChangedCells
Параметри: метод
Връща масив от променени (редактирани) клетки в зависимост от метода (низ, по подразбиране „всички“). Ако 'всички', тогава методът връща всички променени редове. Ако е „мръсен“, той връща само променени клетки с идентификатор на ред.

Метод: restoreCell
Параметри: iRow, iCol
Възстановява стойността на променената клетка с редовия индекс на iRow (да не се бърка с rowid) и индекса на iCol колоната.

Метод: saveCell
Параметри: iRow, iCol
Съхранява клетката с индекс iRow (да не се бърка с rowid) и индекс на колона iCol.

Как се създават елементи за редактиране

Когато редактирате клетка и създавате входни елементи, се използват следните правила:

Атрибутът id на входния елемент се създава като 'iRow_' + име от colModel, където iRow е индексът на реда (а не rowid). Например, когато редактирате клетка с индекс 20 и името 'myname' (от colModel), id става 20_myname.
Атрибутът name на входния елемент е равен на name от colModel.

Какво се изпраща на сървъра

При изпращане на данни към сървъра, изпратеният обект < >съдържа:

Name: двойки стойности, където name е името на входния елемент за клетката
Освен това се добавя двойката "id: rowid", където rowid е идентификаторът на реда.
Ако данните, върнати от събитието beforeSubmitCell, не са празни, тогава тези данни се добавят към изпратените данни.

Още записи от този раздел:

Можете ли да ми кажете как трябва да изглежда файлът, който получава данни чрез cellurl? Сега дори ако в този файл има само връзка с базата данни, jqgrid връща грешка 500.