0

目的は、行内のテキスト領域を編集して別の行をクリックした後、最初の行を保存して行を復元することです。コードはレコードを保存するまで機能しますが、保存後に編集した行を復元することはできません..問題を解決するのを手伝ってください.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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>
    <style>
        .ratingDetails{
            font-family:Arial;font-size:12px;color:#FFF;padding-left:2px;
        }
    </style>
</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<br>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"><br>'+obj.responseText +'<br></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"><br>'+obj.responseText +'<br></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>

繰り返します..修正されたコードの下に..ここでも、次の行をクリックしても前の行が編集モードから戻りません。問題を教えていただけますか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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<br>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>

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

ついに本当の問題を見つけることができました。

「action_taken」フィールドの内容ではなく、直前のフィールドです。その中で、ツールチップ コンテンツに使用される、実際のコンテンツの下にある非表示の DIV 内にテーブルを配置しました。

次の列の action_taken フィールドを編集し、サーバーの応答を受信した後、「action_taken」フィールドの編集内容が、前の列のこのテーブルの最初の TD の内容とタイトルに設定されました。また、編集した列は編集モードから戻りません。前の列からテーブルを削除すると、すべて正常に機能します。テーブルに別の id/style クラスを試してみましたが、変化はありませんでした。何が問題なのですか？問題の原因となっている前の列のテーブル構造を以下に示します。

<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>

クラス「ratingDetails」は単なるフォント定義にすぎません。.ratingDetails{font-family:Arial;font-size:12px;color:#FFF;padding-left:2px;}

何か案が ？

4

1 に答える 1

2

どのビヘイビアーにグリッドを設定するかを決定する必要があります。以前に編集した行からデータを保存したい場合は、 を呼び出す必要がありますsaveRow。現在の変更を破棄して以前の変更を復元したい場合は、 を呼び出す必要がありますrestoreRow。現在コールバック内で行っているようにrestoreRow after を呼び出すのは意味がありません。saveRowonSelectRow

したがって、実装したいものを正しく理解している場合は、 of を呼び出す前に which を含む行を削除する必要があります。saveRowrestoreRow

于 2013-02-07T11:53:03.687 に答える