You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在jqGrid+PHP中实现CRUD后高亮选中新增数据行

在jqGrid+PHP环境实现CRUD后自动选中对应行的问题

我需要在jqGrid与PHP的组合环境中,实现CRUD操作后自动选中对应行的功能:新增数据表单提交完成后,程序能根据该行在列表中的位置自动高亮它,方便用户直观看到输入后的数据变化。我尝试通过Ajax调用callAfterSubmit函数对接add_header.php,但没能实现该功能,相关代码如下:

JQGrid 代码

jQuery("#grid_id").jqGrid('navGrid', '#jqGridPager', null, {
  recreateForm: true,                       //每次激活对话框时都会重新创建表单,使用colModel的新选项
  beforeShowForm: function(form) {
    form[0].querySelector('#no_invoice').setAttribute('readonly', 'readonly')
    var nilaiAsli     = "";
    var no_invoice    = document.getElementById("no_invoice");      // 获取no_invoice输入框元素
    var tgl_pembelian  = document.getElementById("tgl_pembelian");  // 获取tgl_pembelian输入框元素
    var nama_pelanggan = document.getElementById("nama_pelanggan"); // 获取nama_pelanggan输入框元素
    var jenis_kelamin  = document.getElementById("jenis_kelamin");  // 获取jenis_kelamin输入框元素
    var saldo          = document.getElementById("saldo");          // 获取saldo输入框元素

    nilaiAsli        = no_invoice.value;                         // 保存输入框原始值到nilaiAsli变量
    var inputBaru    = no_invoice.value.replace(/<[^>]+>/g, ""); // 使用正则移除输入框中的HTML标签
    no_invoice.value = inputBaru;                                // 显示处理后的输入值

    nilaiAsli           = tgl_pembelian.value;                         // 保存输入框原始值到nilaiAsli变量
    var inputBaru       = tgl_pembelian.value.replace(/<[^>]+>/g, ""); // 使用正则移除输入框中的HTML标签
    tgl_pembelian.value = inputBaru;                                   // 显示处理后的输入值

    nilaiAsli            = nama_pelanggan.value;                         // 保存输入框原始值到nilaiAsli变量
    var inputBaru        = nama_pelanggan.value.replace(/<[^>]+>/g, ""); // 使用正则移除输入框中的HTML标签
    nama_pelanggan.value = inputBaru;                                    // 显示处理后的输入值

    nilaiAsli           = jenis_kelamin.value;                         // 保存输入框原始值到nilaiAsli变量
    var inputBaru       = jenis_kelamin.value.replace(/<[^>]+>/g, ""); // 使用正则移除输入框中的HTML标签
    jenis_kelamin.value = inputBaru;                                   // 显示处理后的输入值

    nilaiAsli     = saldo.value;                         // 保存输入框原始值到nilaiAsli变量
    var inputBaru = saldo.value.replace(/<[^>]+>/g, ""); // 使用正则移除输入框中的HTML标签
    saldo.value   = inputBaru;                           // 显示处理后的输入值
  },
  // afterSubmit:callAfterSubmit,
  // reloadAfterSubmit:true,

}, {
  afterSubmit: callAfterSubmit,
  recreateForm: true,
}, );

function callAfterSubmit(response, postData, oper) {
  let sortfield   = $(this).jqGrid('getGridParam', 'postData').sidx;
  let sortorder   = $(this).jqGrid('getGridParam', 'postData').sord;
  let pagesize    = $(this).jqGrid('getGridParam', 'postData').rows;
  let selectedRow = $(this).jqGrid('getGridParam', 'selrow');

  $.ajax({
      url      : "add_header.php",
      dataType : 'JSON',
      data: {
        no_invoice  : JSON.parse(response.responseText).no_invoice,
        sidx        : sortfield,
        sord        : sortorder,
        selectedRow : selectedRow
      }
    })
  .done(function(data) {
    $('#cData').click();
    let posisi = data.position;
    let pager  = Math.ceil(posisi / pagesize);
    let rows   = posisi - (pager - 1) * pagesize;
    indexRow   = rows - 1;
    $('#grid_id').trigger('reloadGrid', { page: pager });

    // 更新数据成功后,重新选中之前的行
    $('#grid_id').jqGrid('setSelection', selectedRow);
  });
}

PHP 后端代码(add_header.php)

<?php
require "db.php";

if(isset($_GET['no_invoice']) && isset($_GET['sidx']) && isset($_GET['sord'])) {
    $no_invoice = $_GET['no_invoice'];
    $sortfield  = $_GET['sidx']; 
    $sortorder  = $_GET['sord'];
    
    $position = getWithPosition($no_invoice, $sortfield, $sortorder, $koneksi);
    
    function getWithPosition($no_invoice, $sortfield, $sortorder, $koneksi) {
        $data = mysqli_query($koneksi, "SELECT temp.position, temp.*
        FROM 
        (
            SELECT @rownum := @rownum + 1 AS position, penjualan.*
            FROM penjualan
            JOIN 
            (
                SELECT @rownum := 0
            ) rownum ORDER BY penjualan.$sortfield $sortorder
        ) temp WHERE temp.no_invoice = '" . $no_invoice . "'");

        if(!$data) {
            die("Query failed: " . mysqli_error($koneksi));
        }

        $post = mysqli_fetch_assoc($data);
        $pos = $post['position'];
        return $pos;
    }
    
    $response = ['no_invoice' => $no_invoice, 'position' => $position];
    echo json_encode($response);
}
else {
    echo "Error: Missing parameters";
}
?>

内容的提问来源于stack exchange,提问作者Rahmad Qolbi Syahrani

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.30 23:42:31