編輯並保存任何行后重新加載JqGrid表

Question

我在一個php文件中有4個jqGrid表，並為每個網格表傳遞了不同的json數組。我在網格上顯示的數據來自具有不同sql條件的1個表。

我正在為所有網格使用內聯編輯功能，當我編輯並保存table1中的行時，我希望所有網格都應刷新，以便如果先前編輯的行存在於下一個表中，則該表將自動消失。 我要在編輯任何表中的任何行后重新加載所有網格表。 我寫了以下代碼：

<table id="jqgrid"></table>
<div id="pjqgrid"></div>

<table id="jqgrid1"></table>
<div id="pjqgrid1"></div>

<table id="jqgrid2"></table>
<div id="pjqgrid2"></div>

<table id="jqgrid3"></table>
<div id="pjqgrid3"></div>

<script>
pageSetUp();
var myEditOptions = {
    keys: true,
    successfunc: function (response) {
       // alert(JSON.stringify(response)); 
        var msg=response.responseText;
        var n =msg.search("Updated");
        //alert(n);
        if(n>=0)
        {
            $(".inner").html("<div class='alert alert-success fade in'>     <button class='close' data-dismiss='alert'>X</button><i class='fa-fw fa fa-thumbs-up'></i>  "+msg+" </div>");
        } 
        else
        {
            $(".inner").html("<div class='alert alert-danger fade in'><button class='close' data-dismiss='alert'>X</button><i class='fa-fw fa fa-thumbs-down'></i>  "+msg+" </div>");      
        }
        $("#jqgrid").trigger('reloadGrid');
        $("#jqgrid1").trigger('reloadGrid');
        $("#jqgrid2").trigger('reloadGrid');
        $("#jqgrid3").trigger('reloadGrid');
        jQuery("#jqgrid").jqGrid('resetSelection');
        jQuery("#jqgrid1").jqGrid('resetSelection');
        jQuery("#jqgrid2").jqGrid('resetSelection');
        jQuery("#jqgrid3").jqGrid('resetSelection');
        return true;     
    },
    errorfunc: function (rowid,response) {
        //alert(rowid);
    },
    afterrestorefunc:function (rowid,response) {
        jQuery("#jqgrid").jqGrid('resetSelection');
    }

};
</script>

Answer 1

建議您使用aftersavefunc而不是successfunc重新加載網格。 此外，您應該將.trigger("reloadGrid")放置在setTimeout 。 它將允許在開始重新加載之前完成編輯過程 ：

var myEditOptions = {
    keys: true,
    aftersavefunc: function () {
        setTimeout(function () {
            $("#jqgrid,#jqgrid1,#jqgrid2,#jqgrid3").trigger("reloadGrid");
        }, 50);
    },
    ...
};