jqGrid :: onclicking каждой строки после редактирования другого, сохраняет содержимое, но не восстанавливает отредактированную строку

цель состоит в том, что после редактирования текстовой области в строке и нажатия на другую строку, первая должна быть сохранена, а строка должна быть восстановлена. Код работает до сохранения записи, но не восстанавливает отредактированную строку после сохранения. Пожалуйста, помогите мне исправить проблему.

 <? 
if(isset($_GET)){
    $startDate = $_GET['start_date'];
    $endDate   = $_GET['end_date'];
    $type      = $_GET['type'];
}
?>



<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui-lightness/jquery-ui-1.9.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" href="../js/powertip/jquery.powertip.css" />

    <script type="text/javascript" src="../js/jqgrid/js/jquery1.8.3.js"></script>
    <script type="text/javascript" src="../js/jqgrid/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="../js/powertip/jquery.powertip-1.1.0.min.js"></script>
    <script type="text/javascript">
        jQuery.jgrid.no_legacy_api = true;
    </script>
    <script src="../js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    
</head>
<body>
    <table id="rowed2"></table>
    <div id="prowed2"></div>
    <script>
        jQuery(document).ready(function(){ 
            var lastSel;
            jQuery("#rowed2").jqGrid({ 
                url:'feedbacks_bookings_rated_pagination.php?start_date=<?=$startDate?>&end_date=<?=$endDate?>&type=<?=$type?>',

                datatype: "json",
                height:"auto",
                colNames:['Booking
Id','City','Customer name','Trip dates','Local Office','Rating','Action Taken','Status','Action'], colModel:[ {name:'booking_id',index:'booking_id', width:45,align:"center",hidden:false,key: true},// key: true - to get the id value in POST {name:'pick_city',index:'pick_city', width:90,align:"left"}, {name:'actual_name',index:'add_driver_number', width:130,align:"left",sortable:true}, {name:'tripdates',index:'tripdates', width:80,align:"center",sortable:false}, {name:'office_name',index:'office_name', width:150,align:"left",sortable:true}, {name:'rating_status',index:'rating_status', width:70,align:"center",sortable:true,title: false}, {name:'action_taken',index:'action_taken', width:220,align:"left",sortable:false,editable:true,edittype:'textarea',editoptions:{rows:"3",cols:"35"}}, {name:'img_action_status',index:'img_action_status', width:40,align:"center",sortable:true}, {name:'act',index:'act',width:100,align:'center',sortable:false} ], rowNum:15, rowList:[15,25,50], pager: '#prowed2', sortname: 'driver_name', viewrecords: true, sortorder: "asc", subGrid : true, subGridUrl: 'feedbacks_bookings_rated_pagination.php?booking=424519', subGridModel: [{ name:['Booked on','Trip Type/ Amount','Driver Details','Local Office Phone','Essential Feedbacks','Other Feedbacks'], width: [90,90,130,100,160,200]} ], onSelectRow: function(id){ //alert(lastSel+"-hi-"+id); if(id && id!==lastSel){ if (typeof lastSel !== "undefined") { jQuery("#rowed2").jqGrid('saveRow',lastSel); jQuery("#rowed2").jqGrid('restoreRow',lastSel); //jQuery("#rowed2").trigger("reloadGrid"); } lastSel = id; } jQuery(this).jqGrid('resetSelection'); jQuery(this).editRow(id, true); }, editurl: "feedbacks_bookings_rated_pagination.php", caption:"Edit Feedback Details", }); //icons in pagination frame bottom jQuery("#rowed2").jqGrid('navGrid','#prowed2',{ add: false, edit: true,save: true, del: false, reload: true}); jQuery.fn.editRow = function(param) { var rowid = param; var booking_id = jQuery("#rowed2").jqGrid ('getCell', param, 'booking_id'); jQuery("#rowed2").jqGrid('editRow',rowid, { keys : true, oneditfunc: function() { } }); }; jQuery.fn.saveRow = function(param) { var rowid = param; jQuery("#rowed2").jqGrid('saveRow',rowid, { successfunc: function(response) { //obj = eval('(' + response.responseText + ')'); //$.jgrid.info_dialog('Status','<div class="ui-state-successr">
'+obj.responseText +'
</div>', $.jgrid.edit.bClose,{buttonalign:'center'}); return true; }, url : "feedbacks_bookings_rated_pagination.php", mtype : "POST", }); }; jQuery.fn.restoreRow = function(param) { var rowid = param; alert("rstore-"+rowid); jQuery("#rowed2").jqGrid('restoreRow',rowid, { afterrestorefunc : function( response ) { alert("aaaa"); obj = eval('(' + response.responseText + ')'); $.jgrid.info_dialog('Status','<div class="ui-state-successr">
'+obj.responseText +'
</div>', $.jgrid.edit.bClose,{buttonalign:'center'}); return true; } }); }; }) function closeAction(bkId){ if(confirm("Are you sure to close the action?")){ //Ok button pressed... $.post('feedbacks_bookings_rated_pagination.php?action=close',{booking_id: bkId}, function(response){ alert(response.responseText); $("#rowed2").trigger("reloadGrid"); return true; }, "json" ); } } //Function to display rating crieteria values as a tooltip on mouseover of Rating caption function showRatingDetailsToolTip(id) { $('#rating'+id).data('powertiptarget', 'tooltip'+id); $('#rating'+id).powerTip({placement: 'e',smartPlacement: true,mouseOnToPopup: true}); } </script> </body> </html>

Again.. given below a rectified code.. here also, the previous row not getting back from edit mode on clicking next row. Can you tell me the problem?



<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui-lightness/jquery-ui-1.9.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../js/jqgrid/css/ui.jqgrid.css" />

    <script type="text/javascript" src="../js/jqgrid/js/jquery1.8.3.js"></script>
    <script type="text/javascript" src="../js/jqgrid/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        jQuery.jgrid.no_legacy_api = true;
    </script>
    <script src="../js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>

</head>
<body>
    <table id="rowed2"></table>
    <div id="prowed2"></div>
    <script>
        jQuery(document).ready(function(){ 
            var lastSel;
            jQuery("#rowed2").jqGrid({ 
                url:'feedbacks_bookings_rated_pagination.php?start_date=<?=$startDate?>&end_date=<?=$endDate?>&type=<?=$type?>', 
                datatype: "json",
                height:"auto",
                colNames:['Booking
Id','City','Customer name','Trip dates','Local Office','Rating','Action Taken','Status','Action'], colModel:[ {name:'booking_id',index:'booking_id', width:45,align:"center",hidden:false,key: true},// key: true - to get the id value in POST {name:'pick_city',index:'pick_city', width:90,align:"left"}, {name:'actual_name',index:'add_driver_number', width:130,align:"left",sortable:true,editable:true,edittype:'text'}, {name:'tripdates',index:'tripdates', width:80,align:"center",sortable:false}, {name:'office_name',index:'office_name', width:150,align:"left",sortable:true}, {name:'rating_status',index:'rating_status', width:70,align:"center",sortable:true,title: false}, {name:'action_taken',index:'action_taken', width:220,align:"left",sortable:false,editable:true,edittype:'textarea',editoptions:{rows:"3",cols:"35"}}, {name:'img_action_status',index:'img_action_status', width:40,align:"center",sortable:true}, {name:'act',index:'act',width:100,align:'center',sortable:false} ], rowNum:15, rowList:[15,25,50], pager: '#prowed2', sortname: 'booking_id', viewrecords: true, sortorder: "asc", onSelectRow: function(id){ if(id && id!==lastSel){ if (typeof lastSel !== "undefined") { jQuery("#rowed2").jqGrid('saveRow',lastSel,{url : "feedbacks_bookings_rated_pagination.php",mtype : "POST"}); jQuery(this).jqGrid('editRow',lastSel, false); } lastSel = id; } jQuery(this).jqGrid('editRow',id, true); }, editurl: "feedbacks_bookings_rated_pagination.php", caption:"Edit Feedback Details", }); //icons in pagination frame bottom jQuery("#rowed2").jqGrid('navGrid','#prowed2',{ add: false, edit: false,save: false, del: false, reload: true}); }) </script> </body> </html>

=====================

At last I could find the real problem.

It is not with the content of 'action_taken' field, but with the just previous field. In that I put a table inside a hidden DIV under the actual content, used for a tooltip content.

What happens is that after editing the action_taken field in next column and the server response is received, the edited content of 'action_taken' field was set to the content and title of the first TD of this table in previous column. Also, the edited column does not return from edit mode. If I remove the table from previous column, everything works ok. I tried with different id/style class for the table, but no change. What could be the problem? The table structure in previous column causing the issue is given below.

<table id='ratingdata32380' width='189' border='0' cellpadding='0' cellspacing='0' bordercolor='#000000' bgcolor='#4f9de2'>
<tr><td align='left' valign='middle' class='ratingDetails'>Was On Time?</td><td align='center' valign='middle' class='ratingDetails'>aaaa</td></tr>
</table>

The class 'ratingDetails' is nothing but just the font definition. .ratingDetails{font-family:Arial;font-size:12px;color:#FFF;padding-left:2px;}

Any idea ?

0

1 ответы

Вы должны решить, какое поведение должно иметь вашу сетку. Вы хотите сохранить данные из ранее редактируемой строки, тогда вы должны вызвать saveRow . Если вы хотите отменить текущие изменения и восстановить предыдущий, вы должны вызвать restoreRow . Вызов restoreRow после saveRow , как вы делаете в настоящее время внутри обратного вызова onSelectRow , не имеет смысла.

Поэтому, если я правильно понимаю, что вы хотите реализовать, вы должны удалить строку с saveRow , которая перед вызовом restoreRow .

2
добавлено
@JustineThomas: Я нашел в вашем коде, что вы заменили jQuery.fn.editRow , например. Это не правильно! Кроме того, вы используете jQuery.jgrid.no_legacy_api = true . Таким образом, вы не можете использовать функции в форме jQuery (this) .editRow (id, true); (см. Код обратного вызова onSelectRow ). Вы должны использовать jQuery (this) .jqGrid ("editRow", id, true); . Я могу продолжить ... Извините, но примерно половина вашего текущего кода абсолютно неверна . Я не удивлюсь, тогда позвоните jQuery ("# ​​rowed2"). JqGrid ('saveRow', lastSel) не работает. Вы должны использовать Fiddler, Firebug или другой инструмент, чтобы проверить, как сохранить работу.
добавлено автор Oleg, источник
@JustineThomas: Добро пожаловать! Прежде всего, я не использую PHP. Второе: сначала вы должны удалить все ненужные части из вашего кода: функции closeAction и showRatingDetailsToolTip , которые не будут использоваться здесь, удалить переопределение jQuery.fn.editRow , jQuery.fn.saveRow и jQuery.fn.restoreRow , изменить jQuery (this) .editRow (id, true) to jQuery (this) .jqGrid ("editRow", id, true) , удалите вызов restoreRow и resetSelection . Затем вы должны использовать Fiddler или Firebug, чтобы проверить, что будет отправлено на сервер при сохранении строк и как выглядит ответ.
добавлено автор Oleg, источник
@JustineThomas: Я не могу рекомендовать вам любую другую документацию как стандарт . Код можно улучшить и упростить, но текущий должен работать. Вы проверили HTTP-трафик на сервер и с сервера ( Fiddler , Firebug , вкладка «Сеть» в Инструментах разработчика IE: нажмите F12 для запуска и т. д.)? Что будет отправлено на сервер при сохранении строки и как выглядит ответ?
добавлено автор Oleg, источник
@JustineThomas: Извините, но я должен спросить в третий раз: важно знать ответ full с сервера. Кроме того, одна явная ошибка в вашем текущем коде - это строка jQuery (this) .jqGrid ('editRow', lastSel, false); после saveRow , Почему вы постоянно включаете некоторый столбец после сохранения строки? Вы должны просто сохранить строку lastSel с помощью saveRow и начать редактирование новой строки ( id ) с помощью editRow внутри < код> onSelectRow . Я рекомендую вам дополнительно использовать jQuery (this) вместо jQuery ("# ​​rowed2") внутри всех обратных вызовов (см. onSelectRow ) и добавить < code> gridview: true .
добавлено автор Oleg, источник
@JustineThomas: Извините, но целью stackoverflow является совместное использование общих проблем в качестве вопросов и решений в качестве ответов. Это не форум помощи. Изменение «action_taken» на нередактируемое решение вашей проблемы может означать явную ошибку в коде сервера. Поскольку я написал полный ответ от сервера, я имею в виду действительно полный HTTP-запрос, включающий код статуса HTTP, который чрезвычайно важен для запросов jQuery.ajax. Код состояния должен иметь некоторое значение ошибки (> = 400). Возвращаемые тексты responseText не имеют смысла.
добавлено автор Oleg, источник
Спасибо за комментарий. Позвольте мне пояснить это. Я вызвал «restoreRow» после сохранения, только потому, что текстовая область, отображаемая для редактирования, по-прежнему существует даже после сохранения, и после сохранения строки после возврата не возвращается к нормальному виду. То есть, при нажатии каждой строки, она превращается в editmode, а в столбце отображается текстовая область, а предыдущая строка не возвращается к исходной стадии с обновленным значением. Здесь что-то не хватает?
добавлено автор Justine Thomas, источник
Привет, Олег, спасибо за ваши ценные комментарии. Я новичок в JQGrid и не могу найти настоящую документацию, содержащую полные процедуры возможных операций. Я ценю, если вы можете мне помочь, быстро переписав неправильный раздел, чтобы он был хорошим ориентиром для меня.
добавлено автор Justine Thomas, источник
есть ли хорошая документация с рабочими образцами для нового API-интерфейса?
добавлено автор Justine Thomas, источник
исправленный код добавляется выше. можешь ли ты заглянуть в нее, Олег, пожалуйста?
добавлено автор Justine Thomas, источник
firebug sys: Параметры: - action_taken: test2 actual_name: test id: 424230 oper: edit 'test' & 'test2' - значения, введенные мной, которые передаются на сервер в POST. это работало и с предыдущим кодом. Единственная проблема заключается в том, что после редактирования этого значения в строке X, если я нажму на строку Y, значения в строке X должны быть сохранены и его режим редактирования должен быть закрыт, чтобы выглядеть как обычная строка, а строка Y должна быть в редакции Режим. Этого не происходит. Значит, при нажатии строки Y, еще строка X появляется в режиме редактирования даже после сохранения ее содержимого. Как решить эту проблему? также текст ответа в порядке
добавлено автор Justine Thomas, источник
включал строку - jQuery (это) .jqGrid ('editRow', lastSel, false); после saveRow только из-за того, что будет работать, если отключить editmode предыдущей строки. Удалили его и применили изменения в соответствии с вашими предложениями. полученный ответ - {«responseText»: «Записанное действие»}, которое является сообщением, которое я отправляю из сценария сервера после обновления БД. что вы думаете?
добавлено автор Justine Thomas, источник
получил ключ! .. поле «{name: 'action_taken', index: 'action_taken', ... 'вызывает проблему. если он отмечен как не редактируемый, а любой другой доступен для редактирования, он отлично работает. В чем проблема с этой линией?
добавлено автор Justine Thomas, источник
Привет, это заголовок ответа сервера HTTP/1.1 200 OK Дата: Пт, 08 Фев 2013 17:49:15 GMT Сервер: Apache/2.2.22 (Unix) mod_ssl/2.2.22 OpenSSL/1.0.0-fips mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 PHP/5.3.14 mod_perl/2.0.6 Perl/v5.10.1 X-Powered-By: PHP/5.3.14 Истекает: Чт, 19 ноября 1981 г. 08:52:00 GMT Cache- Control: no-store, no-cache, must-revalidate, post-check = 0, pre-check = 0 Pragma: no-cache Vary: Accept-Encoding Content-Encoding: gzip Content-Length: 64 Keep-Alive: timeout = 5, max = 100 Соединение: Keep-Alive Content-Type: text/html
добавлено автор Justine Thomas, источник
одна странная вещь заключается в том, что после сохранения редактируемое поле предыдущей строки содержит текстовое содержимое следующим образом:
добавлено автор Justine Thomas, источник
нашел проблему и разместил детали выше. пожалуйста, изучите его и поделитесь своими мыслями. Благодаря...
добавлено автор Justine Thomas, источник