Режим редактирования jqgrid - не установка данных, когда фокус не изменяется внутри самой jqgrid

Question

У меня странная проблема при редактировании ячейки jqgrid.

• Я получил кнопку Сохранить, чтобы получить измененное значение ячейки из сетки и отправить его на сервер для сохранения.
• Когда я редактирую ячейку и перемещаю фокус в любое место таблицы сетки, и нажимаю кнопку Сохранить, значение ячейки передается правильно.
• Но если я отредактирую ячейку и нажму кнопку сохранения напрямую, не меняя фокус внутри таблицы сетки, она потеряет свои измененные данные.
• Я использую $ ("# vehicleListTable"). GetChangedCells ('all'); получить все отредактированные строки из сетки.

Я попытался захватить события "beforeSubmitCell, afterEditCell, beforeSaveCell, afterSaveCell, afterSaveCell", чтобы увидеть, вызывается ли его вызов после завершения редактирования ячейки и перемещения фокуса на кнопку Сохранить, и обнаружил, что ничего из этого не вызывается. Они вызываются, когда я меняю ячейку и перемещаю фокус внутри самой сетки.

Кто-нибудь может мне помочь? Ниже приведен фрагмент создания таблицы jggrid.

function initTable() {
            var vehTypesStr = "all:All;C:Car or Light Commercial;T:Heavy Commercial;M:Motorcycle;B:Boat;H:Caravan;R:Relocatable;A:Trailer";
            var stockTypesStr = "all:All;N:New;U:Used";
            var priceStatusTypesStr = "all:All;1:Over priced;-1:Under Priced;0:Neutral priced";
            jQuery("#vehicleListTable").jqGrid({                    
                url:'fetch-vehicle-list-json.action?q=2', 
                datatype: "json", 
                colNames:[                      
                    'Exception',
                    'Stock Number',
                    'Stock Type',
                    'Vehicle Type',
                    'Make',
                    'Model',
                    'Year',
                    'Drive Away Price',
                    'Price (unqualified)',
                    'Body Style',
                    'Exterior Base Colour',
                    'Odometer',
                    'Image Count',
                    'Price Status',
                    'Edited Online',
                    'Added Online'], 
                colModel:[  
                    {name:'exception',index:'exception',width:55,sortable:false,formatter:exceptionImagesFormatter,search:false},
                    {name:'stockNum',index:'stockNum',width:90},
                    {name:'vehicleNewUsedType',index:'vehicleNewUsedType',width:70,stype: 'select',searchoptions:{ sopt:['eq'], value: stockTypesStr}},
                    {name:'vehicleType',index:'vehicleType',width:120,stype: 'select',searchoptions:{ sopt:['eq'], value: vehTypesStr}},
                    {name:'make',index:'make',width:90},
                    {name:'model',index:'model',width:90},
                    {name:'year',index:'year',width:60,align:"right",search:false},
                    {name:'driveAwayPrice',index:'driveAwayPrice',width:90,align:'right',formatter:'currency',formatoptions:{thousandsSeparator:',',decimalPlaces:2,prefix:'$ ',defaulValue:''},search:false,editable:false,editrules:{number:true}},
                    {name:'egcPrice',index:'egcPrice',width:90,align:"right",formatter:'currency',formatoptions:{thousandsSeparator:",",decimalPlaces:2,prefix:"$ ",defaulValue:""},search:false},
                    {name:'bodyStyle',index:'bodyStyle',width:70},
                    {name:'exteriorColour',index:'exteriorColour',width:100,editable:false},
                    {name:'odometer',index:'odometer',width:70,search:false},
                    {name:'photoCount',index:'photoCount',width:80,align:"right",search:false},
                    {name:'priceStatus',index:'priceStatus',width:80,formatter:priceStatusImagesFormatter,stype: 'select',searchoptions:{ sopt:['eq'], value: priceStatusTypesStr }},
                    {name:'editedOnline',index:'lastModified',width:80,search:false,hidden:true},
                    {name:'addedOnline',index:'created',width:80,search:false,hidden:true}
                ],
                rowNum:20,
                scroll:1, 
                gridview: true,
                pager: '#vehicleListPager',
                sortname: "<s:property value="vehicleSearch.sortByField"/>",
                <s:if test="vehicleSearch.sortAscending">
                    sortorder:"asc",
                </s:if>
                <s:if test="!vehicleSearch.sortAscending">
                    sortorder:"desc",
                </s:if>
                viewrecords: true,
                recreateForm: true,
                recreateFilter: true,
                caption:"<s:property value="dealer.name"/>",
                multiselect: true,
                width: "40%",
                height: "250",                                      
                onSelectRow: handleTableOnSelect,                 
                beforeSelectRow: handleTableBeforeSelectRow,
                //afterInsertRow: handleTableAfterInsertRow,   
                onSelectAll: handleTableOnSelectAll,   
                loadComplete: handleTableLoadComplete,
                beforeSubmitCell: getEdittedCellData,
                afterEditCell  : getEdittedCellData,
                beforeSaveCell : getEdittedCellData,
                afterSaveCell  : getEdittedCellData,
                afterSaveCell  : getEdittedCellData       
            });
        }

Спасибо Sudha

Answer 1

Я столкнулся с той же проблемой - ячейка все еще находится в режиме редактирования, и метод GetChangedCells не получит значение, поскольку оно не было "сохранено" сеткой. Для этого выполните следующие действия -

Объявите две переменные для хранения текущей строки и столбца для редактируемой ячейки.

var saverow;
var savecol;

Используйте событие редактирования ячейки afterEditCell для сохранения текущей строки и столбца в ваших новых переменных. Это делается в параметрах инициализации jqGrid.

afterEditCell: function (id, name, val, IRow, ICol) {
     saverow = IRow;
     savecol = ICol;
}

В обработчике нажатия кнопки «Сохранить» определите, есть ли у вас ячейка в режиме редактирования, а затем вызовите метод saveCell в jqGrid. Передайте значения строки и столбца ячейки. Это сохранит значение.
Также вызовите метод editCell для jqGrid, передав значения строки и столбца ячейки И значение false. Это выведет ячейку из режима редактирования. Сбросьте значения строк и столбцов в нулевое значение.

// if a cell is currently in edit mode, then we need to save it and exit edit mode
if (saverow != null && savecol != null) {
    $("#vehicleListTable").jqGrid('saveCell', saverow, savecol, true);
    $("#vehicleListTable").jqGrid('editCell', saverow, savecol, false);
    saverow = null;
    savecol = null;
}