在 PHP 中刷新 Jqgrid

Posted 2023-05-07

【中文标题】在 PHP 中刷新 Jqgrid

【英文标题】：Refresh Jqgrid in PHP

【发布时间】：2022-01-12 09:37:59

【问题描述】：

我有 jqgrid 需要刷新数据 onchange 事件，我用 js 创建表并像这样制作 jqgrid 的对象：

$('<table id="list2"></table>' +
    '<div id="gridpager"></div>').appendTo('#topics');
grid = jQuery("#list2");

在此之后，我有一个 ajax 函数来从数据库中获取数据，并将 jqgrid 放在成功方法上。这是代码。

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);
            debugger;
            grid.jqGrid(
                datastr: dt.records,
                datatype: "jsonstring",
                height: "auto",
                loadui: "disable",
                pgbuttons : false,
                pginput : false,
                colNames: [/*"id",*/"Items","Debit", "Credit"],
                colModel: [
                    //name: "id",width:1, hidden:true, key:true,
                    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: "elementName",
                autowidth: true,

                rowNum: 10000,
                jsonReader: 
                    root: "response"
                
            ).navGrid('#gridpager',
                view:true,
                del:false,
                search: false,
                autoRefresh: true,
            );
            jQuery("#list2").trigger("reloadGrid");

        
    );

这是我的下拉 onchange 事件。

<select name="time_period" id="time_period" class="form-control" onchange="getTimePeriod()">
                        <option value="0">--Select Time Period--</option>
                        <option value="cDay">Current Day</option>
                        <option value="lDay">Last Day</option>
                        <option value="cWeek">Current Week</option>
                        <option value="lWeek">Last Week</option>
                        <option value="cMonth">Current Month</option>
                        <option value="lMonth">Last Month</option>
                        <option value="cYear">Current Year</option>
                        <option value="lYear">Last Year</option>
                    </select>

这里是 getTimePeriod() 方法的代码，我从这里调用带有传递参数的 getReport 方法。

函数getTimePeriod()

    let timePeriod = $("#time_period").val();
    let periodDate = new Date();
    let date = new Date(), y = date.getFullYear(), m = date.getMonth();
    let message = "";
    let FYear;
    let start_date = new Date();
    debugger;
    switch (timePeriod) 

        case 'cDay':
            periodDate = new Date();
            message = 'Current Day';
            break;

        case 'lDay':
            //periodDate = new Date;
            start_date.setDate(start_date.getDate() - 1);
            periodDate.setDate(periodDate.getDate() - 1);
            // periodDate = periodDate.toISOString().slice(0, 10);
            message = 'Last Day';
            break;

        case 'cWeek':
            //periodDate = new Date;
            start_date.setDate(start_date.getDate() - (start_date.getDay() + 6) % 7); // Starting date of week
            periodDate.setDate(periodDate.getDate() - (periodDate.getDay() - 7) % 7); // Ending date of Week
            message = 'Current Week';
            break;

        case 'lWeek':
            start_date.setDate(start_date.getDate() - (start_date.getDay() + 6) % 7);// Starting date.
            start_date.setDate(start_date.getDate() - 7);
            periodDate.setDate(periodDate.getDate() - (periodDate.getDay() -  7) % 7); // Ending date.
            periodDate.setDate(periodDate.getDate() - 7);
            message = 'Last Week';
            break;

        case 'cMonth':
            start_date = new Date(y, m, 1); // Starting date of this month.
            periodDate = new Date(y, m + 1, 0); // Ending date of this month.
            message = 'Current Month';
            break;

        case 'lMonth':
            start_date = new Date(y, m - 1, 1); // Starting date of the previous Month.
            periodDate = new Date(y, m, 0); // Ending date of the previous Month.
            message = 'Last Month';
            break;

        case 'cYear':
            FYear = getFinancialYearsLastMonth();
            start_date = new Date(y, FYear, 1); // Starting date of this Financial Year.
            periodDate = new Date(y +1, FYear, 0); /*#### second value tells the month number ######*/ // Ending Date.
            message = 'Current Year';
            break;

        case 'lYear':
            FYear = getFinancialYearsLastMonth();
            start_date = new Date(y - 1, FYear, 1); // Starting date of previous Financial Year.
            periodDate = new Date(y, FYear, 0); /*#### second value tells the month number ######*/ // Ending Date
            message = 'Last Year';
            break;

    

    // periodDate = periodDate.toISOString().slice(0, 10);
    document.getElementById("showDate").innerhtml = getDateInFormat(periodDate);
    getReport(ReFormateDate(start_date),ReFormateDate(periodDate));

避免getTimePeriod方法中的其余代码，只看getReport的调用。

我放置调试器并测试每次更新数据但 jqgrid 不刷新数据。我试过但喜欢 jQuery("#list2").trigger("reloadGrid");和 .navGrid('#gridpager', 观点：真实， 德尔：假， 搜索：假， 自动刷新：真， );但没有影响。你能帮我解决这个问题吗？ 谢谢！

【参考方案1】：

在您的实现中，您每次更改时都会调用 jqGrid（您的函数 getReport） - 不更新网格的原因是它已经创建。

当创建网格实例时，对它的任何调用都不会执行任何操作。 我看到了两个简单的解决方案

在您的情况下，您可以在创建网格之前简单地销毁网格 - 根据使用的 jqGrid 版本检查文档 - Guriddo jqGrid 或 free-jqGrid。 - 然后调用 jqGrid 实例。

当您第一次创建网格时，标记它已创建，并在您的成功函数中第一次调用后执行（这只是未经测试的代码）

success: function (data) 
    let dt = JSON.parse(data);
    if (grid_is_created) 
        grid.jqGrid('setGridParam', data: dt.records).trigger("reloadGrid");
     else 
        grid.jqGrid(...);
        grid_is_created= true;
    

【讨论】：

我尝试了第一个解决方案，当我把 grid.jqGrid("GridUnload");方法它第一次完美加载，但第二次删除网格

对于第二个解决方案，它的发生与我在问题中所说的相同。它是第一次加载，但在更改时不会更改记录。

您能告诉我您是如何实现第一个选项的吗？我建议您将 gridUnload 放在 ajax 调用之前，而不是在成功函数中。看来您使用的是 free-jqGrid，因为 Guriddo 中 gridUnload 的调用完全不同。在之前的版本中这个方法有问题，所以我建议你把它放在 ajax 之前，最好切换到支持的 Guriddo jqGrid。 free-jqGrid 3 年就死了。

在 ajax 之前调用 gridUnload 时同样的问题。

使用哪个版本的jqGrid？