如何在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
相关产品推荐
相关产品推荐

