JqGrid получает доступ к данным ячейки во время их редактирования
Автор вопроса: ShawnОтветов: 3
В настоящее время я использую afterSaveCell для ручного обновления некоторых ячеек в сетке. У меня это работает нормально, если пользователь использует ввод, чтобы сохранить текущую редактируемую ячейку.
К сожалению, если они щелкнут или выйдут из ячейки, которую они редактируют, непосредственно в другую ячейку, я больше не смогу получить значение ячейки только что отредактированной ячейки, поскольку getCell вернет только html для элемента управления вводом.
Таким образом, есть ли способ получить доступ к значению ячейки даже во время ее редактирования?
Если вам нужно сохранить текущую ячейку на TAB, вы будете перезаписывать реализацию по умолчанию nextCell и prevCell, которые будут вызываться на TAB или Shift-TAB. См. код функций здесь: github.com/ tonytomov/jqGrid/blob/master/js/ Oleg 25.02.2011
Спасибо @Oleg, это определенно помогло бы решить проблему TAB, но по-прежнему оставляет проблему при размытии на другую ячейку в той же сетке. Shawn 26.02.2011
Вы правы насчет размытия. Вероятно, способ привязки элемента редактирования к событию "размытие" или даже "фокусировка" может решить вашу проблему. Вы можете использовать dataEvents (см. ячейку и манипулировать ею">stackoverflow.com/questions/4407273/) в editoptions, чтобы сделать привязку к событию focusout и вызвать saveCell. Вы можете дополнительно использовать beforeEditCell для сохранения последних iRow, iCol необходимых параметров в файле saveCell. Oleg 26.02.2011
Я перечитал ваш вопрос еще раз и не уверен, что правильно понял вас раньше. Мне кажется, что вы хотите просто иметь доступ к ячейке, содержащейся внутри специального события. Не имея кода, который более четко описывает вашу проблему, я, вероятно, не смогу вам помочь. Oleg 26.02.2011
Я попытался создать пример, используя clientArray, но он не воспроизводит ошибку. Кажется, что задержка при отправке новых данных ячейки на сервер вызывает создание поля ввода до вызова afterSaveCell. В примере clientArray, без отправки на сервер, afterSaveCell вызывается до того, как только что отредактированные данные ячейки преобразуются во входные данные. Мне нужно немного больше времени, чтобы создать правильный пример. Shawn 26.02.2011
@ Олег, я создал пример, который вы можете увидеть здесь. Если вы попытаетесь отредактировать столбцы Amount или Tax, а затем щелкнете по другому столбцу после редактирования, вновь переключенный на итог изменится на 0,00 вместо правильного итога. Это происходит потому, что ячейка, которую вы сейчас редактируете, возвращает элемент управления вводом getCell вместо значения ячейки. Происходит это из-за задержки с удаленным cellsubmit. Использование локального clientArray не вызывает этой проблемы. Shawn 26.02.2011
Я вижу две проблемы в вашем коде. Первый более косметический, но правильное решение может многое упростить в будущем.
Первая проблема заключается в том, что вы вручную добавляете строку "ИТОГО" как часть данных сетки и вычисляете значения в строке внутри функции calculateTotal. Лучше использовать опцию footerrow:true, которая добавляет дополнительную строку внизу сетки, которая не смешивается с данными сетки. Для серверных данных вы можете использовать userdata часть ответа JSON или XML от сервера и использовать userDataOnFooter:true дополнительно для передачи данных из параметра userData jqGrid в строку нижнего колонтитула. В случае "локального" типа данных можно использовать метод footerData для установить (или получить) данные в нижнем колонтитуле. Кроме того, для вычисления суммы элементов можно использовать метод getCol. в колонке. Таким образом, ваша версия функции calculateTotal может быть переписана как
var grid = $("#list");
var calculateTotal = function() {
var totalAmount = grid.jqGrid('getCol','amount',false,'sum'),
totalTax = grid.jqGrid('getCol','tax',false,'sum');
grid.jqGrid('footerData','set',{name:'TOTAL',amount:totalAmount,tax:totalTax});
}
Теперь к вашей основной проблеме. Вы используете режим редактирования ячейки. Если функция calculateTotal (ваш оригинальный или мой упрощенный вариант) будет вызываться в момент, когда одна из ячеек 'сумма' или 'налог' находится в режиме редактирования, то calculateTotal будет прочитан фрагмент HTML с элементом <input> вместо строка с числом, и расчет не будет выполнен.
Я создал небольшую демонстрацию, которая вызывает calculateTotal каждую секунду. Поэтому, если вы щелкнете по любой ячейке в столбце "сумма" или "налог", вы увидите, что в строке нижнего колонтитула 0 будет отображаться как сумма. Таким образом, демо с cellsubmit:'clientArray' имеет ту же проблему, что и ваш исходный код с cellsubmit:'remote'.
Для решения проблемы можно использовать параметр data jqGrid при вычислении суммы:
var grid = $("#list");
var calculateTotal = function() {
var gridData = grid.jqGrid('getGridParam','data'),
i=0,totalAmount=0,totalTax=0;
for (;i<gridData.length;i++) {
var rowData = gridData[i];
totalAmount += Number(rowData.amount);
totalTax += Number(rowData.tax);
}
grid.jqGrid('footerData','set',{name:'TOTAL',amount:totalAmount,tax:totalTax});
}
Соответствующую фиксированную демонстрацию вы найдете здесь. В вашем окончательном коде вы можете удалить
setInterval(calculateTotal, 1000);
который я использовал только для демонстрации и обновлял нижний колонтитул только в обработчике событий afterSaveCell.
ОБНОВЛЕНО: если вы работаете с удаленными данными, вы не можете использовать параметр data. Таким образом, при необходимости нужно получить данные из элемента <input>. Я создал еще одно демо, демонстрирующее, как это можно сделать. Код calculateTotal будет длиннее:
var getColumnIndexByName = function(grid,columnName) {
var cm = grid.jqGrid('getGridParam','colModel');
for (var i=0,l=cm.length; i<l; i++) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
},
getTextFromCell = function(cellNode) {
return cellNode.childNodes[0].nodeName === "INPUT"?
cellNode.childNodes[0].value:
cellNode.textContent || cellNode.innerText;
},
calculateTotal = function() {
var totalAmount = 0, totalTax = 0,
i=getColumnIndexByName(grid,'amount');
$("tbody > tr.jqgrow > td:nth-child("+(i+1)+")",grid[0]).each(function() {
totalAmount += Number(getTextFromCell(this));
});
i=getColumnIndexByName(grid,'tax');
$("tbody > tr.jqgrow > td:nth-child("+(i+1)+")",grid[0]).each(function() {
totalTax += Number(getTextFromCell(this));
});
grid.jqGrid('footerData','set',{name:'TOTAL',amount:totalAmount,tax:totalTax});
};
Ответ 2 · рейтинг 1 · user1413147
Спасибо олег, решение для меня было применить и изменить то, что вы поставили
