jqGrid reloadGrid 觸發 Illegal Invocation 錯誤：postData 變數未定義

錯誤現象

呼叫 jqGrid('setGridParam', { postData: {...} }).trigger('reloadGrid') 時，主控台報錯 Uncaught TypeError: Illegal invocation。

根本原因

postData 物件中引用的變數 (name, age, gender 等) **在當前作用域未定義**，導致 JavaScript 嘗試讀取未宣告的變數拋出 ReferenceError，但在某些瀏覽器/情境下包裝為 Illegal invocation。

錯誤代碼片段

jQuery("#jqgrid").jqGrid('setGridParam', {
    url: "list.do",
    datatype: 'json',
    postData: {
        "name": name,      // name 未定義！
        "age": age,        // age 未定義！
        // ...
    },
    page: 1
}).trigger('reloadGrid');

正確修法

在構建 postData **之前** 明確獲取表單欄位值：

$("#btnQuery").click(function() {
    // 1. 先獲取所有查詢條件值
    var postData = {
        name: $("#name").val(),
        age: $("#age").val(),
        gender: $("#gender").val(),
        posswrod: $("#posswrod").val(),
        seraly: $("#seraly").val(),
        position: $("#position").val(),
        dept: $("#dept").val(),
        remark: $("#remark").val()
    };
    
    // 2. 再設定 grid 參數並重載
    jQuery("#jqgrid").jqGrid('setGridParam', {
        url: "list.do",
        datatype: 'json',
        postData: postData,   // 使用已構建的物件
        page: 1
    }).trigger('reloadGrid');
});

最佳實踐封裝

function reloadGridWithForm(formSelector, gridSelector, url) {
    var postData = {};
    $(formSelector + ' :input[name]').each(function() {
        var $input = $(this);
        postData[$input.attr('name')] = $input.val();
    });
    $(gridSelector).jqGrid('setGridParam', {
        url: url,
        datatype: 'json',
        postData: postData,
        page: 1
    }).trigger('reloadGrid');
}

// 使用
$("#btnQuery").click(function() {
    reloadGridWithForm('#queryForm', '#jqgrid', 'list.do');
});

補充：jqGrid postData 函數寫法 (動態求值)

若希望每次請求自動取最新值，可傳入**函數**：

postData: {
    name: function() { return $("#name").val(); },
    age: function() { return $("#age").val(); }
    // ...
}

jqGrid 會在每次發送請求前呼叫這些函數獲取當前值，避免變數作用域問題。

結語

Illegal invocation 本質是 **postData 中引用了未定義的變數**。解決方法：在構建 postData 前先收集表單值，或使用函數屬性延遲求值。建議採用封裝函數統一處理，減少重複代碼與錯誤。