修改数据后Jquery Grid无法自动刷新的技术问题求助

发票页面使用JQGrid管理发票明细（数量、价格、描述、总成本等），修改行数据后数据库已同步，但JQGrid无法自动刷新显示最新数据，必须手动刷新整个页面。以下是问题分析及修复方案：

原代码参考 #

前端JQGrid代码 #

<script type="application/javascript">
  function autocomplete_element(value, options) {
    var $ac = $('<input type="text" size="450"/>');
    $ac.val(value);
    $ac.autocomplete({source: "autocompleteopr.php"});
    return $ac;
  } 
  function autocomplete_value(elem, op, value) {
    if (op == "set") {
        $(elem).val(value);
      }
      return $(elem).val();
  }
  $(document).ready(function() {
    var mkinline
      $grid = $("#list"),
      numberTemplate = {
      formatter: 'number', align: 'right', sorttype: 'number',
      editrules: {number: true, required: true}
    };
    var selectedRow = 0;
    $grid.jqGrid({
      datatype: 'json',
      url:'orderdetails_json.php',
      colNames: ['ProductID', 'Qty.', 'Product', 'Count', 'Unit', 'Unit Price', 'Total Price'],
      colModel: [
        {name:'ProductID', index:'ProductID', align:'right', hidden:true, editable:true, key:true},
        {name:'Quantity', index:'Quantity', editable:true, width:50, align:'right', edittype:'text', editoptions: editOptions},
        {name:'Description', index:'Description', editable:true, width:450, align:'left', edittype: 'custom', editoptions: {'custom_element' : autocomplete_element, 'custom_value' : autocomplete_value}},
        {name:'Count', index:'Count', editable:true, width:100, align:'left', edittype: 'text', required:false},
        {name:'Unit', index:'Unit', editable:true, width:100, align:'left', edittype: 'text', required:false},
        {name:'UnitPrice', index:'UnitPrice', editable:true, required:false, width: 80, template: numberTemplate},
        {name:'ExtendedPrice', index:'ExtendedPrice', editable:true, required:false, width: 80, template: numberTemplate},
      ],
      onSelectRow: function(id){
        if(id && id!==mkinline){
          jQuery('#list').saveRow(mkinline);
          jQuery('#list').editRow(id,true);
            mkinline=id;
          }
    },    
    reloadAfterSubmit: true,
    afterSubmit: function () {
      $('#list').jqGrid("setGridParam", {datatype: 'json'});
      return [true];
    },

    cmTemplate: {editable: true},
      loadonce:false,
    rowNum: 100,
    rowList: [],
    pgbuttons: false,
    pgtext: null,
    pager: '#pager',
    rownumbers: false,
    sortname: '',
    viewrecords: false,
    sortorder: '',
    height: '100%',
    width:850,
    editurl: 'addeditdeldetails.php',
    caption: 'Order Details',
    jsonReader: {repeatitems: false, id: "ProductID"},
  });
    var editOptions = {
    keys: true,
    mtype: "POST",
    successfunc: function () {
      var $self = $(list);
      setTimeout(function () {
        window.location.reload(false);
      }, 50);
    }
    };
    jQuery("#list").jqGrid("navGrid","#pager",{celledit:true,edit:false,add:false,del:true,save:false,search:false,refresh:false}, {}, {}, {closeAfterDelete:true,caption:"Delete",msg:"Delete selected",width:"400"});
  jQuery("#list").jqGrid("inlineNav", "#pager",{celledit:true,edit:true,add:true,del:false,search:false,save:false,refresh:false,addParams:{position:"last", addRowParams: editOptions}, editParams: editOptions});
  });
  function resetForm() {
      window.location.reload(false);
  }
</script>

后端PHP处理代码（addeditdeldetails.php） #

<?php
  if (session_status() == PHP_SESSION_NONE) { session_start(); }
  include('db_connect.php');
  $oper = $_POST['oper'];
  $OrderID = $_SESSION['pid'];
  //新增功能正常
  if($oper == "add") {
      $Quantity = $_POST['Quantity'];
    $Product = $_POST['Description'];
    $arr = explode(" | ", $Product, 3);
    $Description = $arr[0];
    $Count = $arr[1];
    $Unit = $arr[2];
    $qgetproduct = "SELECT product_id FROM tbl_products WHERE product_desc = ? AND count = ? AND unit = ?";
    $getproduct = $pdo->prepare($qgetproduct);
    $getproduct->execute([$Description,$Count,$Unit]);
    $ProductID = $getproduct->fetchColumn();
      $qgetprice = "SELECT price FROM tbl_orderdata WHERE product_id = ?";
    $getprice = $pdo->prepare($qgetprice);
    $getprice->execute([$ProductID]);
    $UnitPrice = $getprice->fetchColumn();
    $ExtendedPrice = $UnitPrice*$Quantity;
      $qadddetails = "INSERT INTO tblorderdetails (order_id, product_id, quantity, product_desc, count, unit, price, extended_price) VALUES (?, ?, ?, ?, ?, ?, ?, ?)";
    $adddetails = $pdo->prepare($qadddetails);
      $adddetails->execute([$OrderID,$ProductID,$Quantity,$Description,$Count,$Unit,$UnitPrice,$ExtendedPrice]);
    if ($adddetails) { $success = "true"; }
  }  
  //修改后网格不刷新
  elseif($oper == "edit") {
      $Quantity = $_POST['Quantity'];
      $ProductID = $_POST['ProductID'];
      $UnitPrice = $_POST['UnitPrice'];
      $ExtendedPrice = $UnitPrice*$Quantity;
      $qeditdetails = "UPDATE tblorderdetails SET quantity = ?, price = ?, extended_price = ? WHERE product_id = ? AND order_id = ?";
    $editdetails = $pdo->prepare($qeditdetails);
      $editdetails->execute([$Quantity,$UnitPrice,$ExtendedPrice,$ProductID,$OrderID]);
    if ($editdetails) { $success = "true"; }
  }  
  //删除功能正常
  elseif($oper == "del") {
      $ProductID = $_POST['id'];
    $qdeletedetails = "DELETE FROM tblorderdetails WHERE product_id = ? AND order_id = ?";
    $deletedetails = $pdo->prepare($qdeletedetails);
      $deletedetails->execute([$ProductID,$OrderID]);
    if ($deletedetails) { $success = "true"; }
  }
  header('HTTP/1.1 200 OK');
  $response = $success;
  echo json_encode($response);
  return;
?>

问题分析 #

1. 前端选择器错误：editOptions中的$(list)是无效选择器，未加引号导致JS报错，successfunc内的刷新逻辑无法执行
2. 响应格式不规范：后端仅返回字符串"true"，JQGrid无法正确识别操作结果，无法触发自动刷新
3. 刷新逻辑不合理：当前用window.location.reload()强制整页刷新，未利用JQGrid的局部重载能力

修复方案 #

1. 前端JS修改 #

修改editOptions部分，修复选择器错误并替换为网格局部重载逻辑：

var editOptions = {
  keys: true,
  mtype: "POST",
  successfunc: function (response) {
    // 解析后端返回的JSON响应
    var res = JSON.parse(response.responseText);
    if (res === "true") {
      // 触发网格重载，拉取最新数据
      $grid.trigger("reloadGrid");
      return true;
    }
    return false;
  }
};

同时确保afterSubmit配置正确，重置数据类型以从服务器拉取最新数据：

afterSubmit: function () {
  $grid.jqGrid("setGridParam", { datatype: "json" });
  return [true];
},

2. 后端PHP优化（可选但更规范） #

修改响应格式为JQGrid兼容的结构，便于前端识别：

header('Content-Type: application/json');
// 编辑操作返回修改行的ID，便于JQGrid定位更新
$response = [
  "success" => $success,
  "id" => isset($ProductID) ? $ProductID : null
];
echo json_encode($response);

若保持原有返回格式，前端解析逻辑无需调整。

3. 控制台排查 #

修改后若仍不生效，打开浏览器开发者工具（F12）查看控制台是否有JS报错，确保所有代码无语法错误。

内容的提问来源于stack exchange，提问作者Raymond Meade