PHP环境下Jqgrid下拉框onchange事件触发后数据不刷新问题求助

问题根因 #

1. 重复初始化jqGrid：grid.jqGrid({...}) 是初始化方法，仅首次调用时会渲染表格结构，后续重复调用不会覆盖原有配置，也不会加载新数据
2. 调用刷新方法不匹配：reloadGrid 默认针对远程请求类型的数据源生效，你使用datatype: "jsonstring"通过datastr传静态数据时，默认的reload不会读取新的datastr值
3. 配置参数错误：ExpandColumn 配置的值为elementName，但你的colModel中无对应字段，会导致树表格渲染异常
4. navGrid 中的autoRefresh: true仅控制导航条是否显示刷新按钮，不会自动触发数据更新，对你的场景无效果

解决方案 #

步骤1：全局仅初始化一次jqGrid #

将jqGrid初始化逻辑从ajax回调中抽离，页面加载完成后仅执行一次：

// 页面加载完成后执行
$('<table id="list2"></table>' +
    '<div id="gridpager"></div>').appendTo('#topics');
grid = jQuery("#list2");
// 全局仅初始化一次jqGrid
grid.jqGrid({
    datatype: "jsonstring",
    height: "auto",
    loadui: "disable",
    pgbuttons : false,
    pginput : false,
    colNames: ["Items","Debit", "Credit"],
    colModel: [
        {name: "name", width:250, resizable: false,sortable: false},
        {name: "debit",width:150,sortable: false},
        {name: "credit",width:150,sortable: false}
    ],
    treeGrid: true,
    pager : '#gridpager',
    caption: "Trail Balance Report",
    ExpandColumn: "name", // 修正为实际存在的列名
    autowidth: true,
    rowNum: 10000,
    jsonReader: {
        root: "response"
    }
}).navGrid('#gridpager',{
    view:true,
    del:false,
    search: false
});

步骤2：修改getReport方法，仅更新数据不重复初始化 #

function getReport(start_date,end_date) {
    $.ajax({
        url: "logics/inventory_reports",
        type: "POST",
        data: {
            type: "getTrailBalance_report",
            start_date: start_date,
            end_date: end_date,
        },
        success: function (data) {
            let dt = JSON.parse(data);
            // 清空原有数据
            grid.jqGrid('clearGridData');
            // 更新数据源配置
            grid.jqGrid('setGridParam', {
                datastr: dt.records
            });
            // 触发重新渲染，加current:true可保留树节点展开状态
            grid.trigger('reloadGrid', [{current:true}]);
        }
    });
}

兼容方案（如遇版本兼容问题可使用） #

如果上述方案仍然不生效，可在每次更新数据前销毁原有grid再重新初始化：

function getReport(start_date,end_date) {
    $.ajax({
        url: "logics/inventory_reports",
        type: "POST",
        data: {
            type: "getTrailBalance_report",
            start_date: start_date,
            end_date: end_date,
        },
        success: function (data) {
            let dt = JSON.parse(data);
            // 销毁原有grid实例
            if (grid.length) {
                grid.jqGrid('GridUnload');
            }
            // 重新初始化grid并加载新数据
            grid.jqGrid({
                datastr: dt.records,
                datatype: "jsonstring",
                height: "auto",
                loadui: "disable",
                pgbuttons : false,
                pginput : false,
                colNames: ["Items","Debit", "Credit"],
                colModel: [
                    {name: "name", width:250, resizable: false,sortable: false},
                    {name: "debit",width:150,sortable: false},
                    {name: "credit",width:150,sortable: false}
                ],
                treeGrid: true,
                pager : '#gridpager',
                caption: "Trail Balance Report",
                ExpandColumn: "name",
                autowidth: true,
                rowNum: 10000,
                jsonReader: {
                    root: "response"
                }
            }).navGrid('#gridpager',{
                view:true,
                del:false,
                search: false
            });
        }
    });
}

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