如何在不同页面展示两个jqGrid？主从表场景实现咨询

Hey there! I’ve tackled this exact scenario with jqGrid before, so let’s break down how to move the invoice details to a separate page instead of displaying them inline like the Advanced -> Master Details demo.

Step 1: Set Up the Master Grid to Handle Row Clicks #

First, on your main page (where the master list of invoices lives), you’ll need to add an onSelectRow handler to your jqGrid. This will trigger a redirect to the details page, passing the selected invoice’s ID as a URL parameter.

Here’s the code snippet for your master grid:

$("#invoiceMasterGrid").jqGrid({
    url: 'your-master-data-api.php', // Your endpoint for invoice list data
    datatype: 'json',
    colModel: [
        { name: 'invoiceId', label: 'Invoice ID', width: 100 },
        { name: 'customerName', label: 'Customer', width: 200 },
        { name: 'invoiceDate', label: 'Date', width: 150 },
        { name: 'totalAmount', label: 'Total', width: 120, formatter: 'currency' }
    ],
    rowNum: 10,
    pager: '#masterPager',
    caption: 'Invoices',
    // Handle row selection to redirect to details page
    onSelectRow: function(rowid) {
        // Get the invoice ID from the selected row
        const invoiceId = $(this).jqGrid('getCell', rowid, 'invoiceId');
        // Redirect to details page with ID in URL
        window.location.href = `invoice-details.html?invoiceId=${invoiceId}`;
    }
});

Step 2: Initialize the Details Grid on the Separate Page #

On your new invoice-details.html page, you’ll need to:

1. Extract the invoice ID from the URL parameters
2. Initialize a jqGrid that fetches data filtered by this ID

First, add a helper function to grab the URL parameter:

function getInvoiceIdFromUrl() {
    const params = new URLSearchParams(window.location.search);
    return params.get('invoiceId');
}

Then set up your details grid:

$(document).ready(function() {
    const invoiceId = getInvoiceIdFromUrl();
    
    // Validate we have an ID before proceeding
    if (!invoiceId) {
        alert('No invoice ID was provided. Please select an invoice from the list.');
        window.location.href = 'invoices.html'; // Redirect back to master page if needed
        return;
    }

    $("#invoiceDetailsGrid").jqGrid({
        url: 'your-details-data-api.php', // Your endpoint for invoice line items
        datatype: 'json',
        postData: { invoiceId: invoiceId }, // Pass ID to your backend
        colModel: [
            { name: 'productCode', label: 'Product Code', width: 120 },
            { name: 'productName', label: 'Product Name', width: 250 },
            { name: 'quantity', label: 'Qty', width: 80 },
            { name: 'unitPrice', label: 'Unit Price', width: 120, formatter: 'currency' },
            { name: 'lineTotal', label: 'Line Total', width: 120, formatter: 'currency' }
        ],
        rowNum: 10,
        pager: '#detailsPager',
        caption: `Invoice Details (ID: ${invoiceId})`
    });
});

Step 3: Update Your Backend to Filter Details by Invoice ID #

Make sure your backend endpoint for the details grid accepts the invoiceId parameter and returns only the line items associated with that invoice. For example, if you’re using PHP, your query might look like:

$invoiceId = $_POST['invoiceId'];
$query = "SELECT productCode, productName, quantity, unitPrice, lineTotal FROM invoice_items WHERE invoiceId = ?";
// Execute prepared statement to avoid SQL injection

Quick Tips #

• Ensure both pages include the required jqGrid CSS and JavaScript files (same as the demo)
• Add visual feedback on the master grid: use setSelection to highlight the clicked row
• For a smoother experience, you could load the details page via AJAX without full page reload, but the URL parameter method is simpler and preserves bookmarkability

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