带有 jqgrid 的三页脚行无法正常工作

Question

我需要在 jqrid 中创建一个三页脚行（想法是在网格末尾显示 3 个总计行）。为了实现这一点，我将这篇文章 How to create two footer rows in jqgrid 闲置，这对 Oleg 非常有用。

问题是我在他的代码中进行了一些更改以显示 3 个总计行，并且在第一次加载数据时工作正常，但是如果您单击下一页或任何其他操作，它将显示 3 个总计行但是其中一个是重复的，所以我失去了第二个总数。

这是我的代码：

                loadComplete: function () {//for showing default edit
                    var $this = $(this), ids = $this.jqGrid('getDataIDs'), i, l = ids.length;
                    //In order to have three totals
                    var $this = $(this),
                    $footerRow = $(this.grid.sDiv).find("tr.footrow"),
                    $secondFooterRow,$thirdFooterRow;
                    var f = '$'+{!optyObj.Otter_FFA_Total_Before_GST__c};
                    var m = '$'+{!optyObj.Otter_FFA_Grand_Total_GST__c};
                    var l = '$'+{!optyObj.Otter_FFA_Grand_Total_After_GST__c};

                    $secondFooterRow = $(this.grid.sDiv).find("tr.myfootrow");
                    $thirdFooterRow = $(this.grid.sDiv).find("tr.myfootrow");
                    if ($secondFooterRow.length === 0) {
                        // add second row of the footer if it's not exist
                        $secondFooterRow = $footerRow.clone();
                        $secondFooterRow.removeClass("footrow").addClass("myfootrow ui-widget-content");
                        $secondFooterRow.children("td").each(function () {
                            this.style.width = ""; // remove width from inline CSS
                        });
                        $secondFooterRow.insertAfter($footerRow);
                    }      
                    if ($thirdFooterRow.length === 0) {
                        // add second row of the footer if it's not exist
                        $thirdFooterRow = $secondFooterRow.clone();
                        $thirdFooterRow.removeClass("footrow").addClass("myfootrow ui-widget-content");
                        $thirdFooterRow.children("td").each(function () {
                            this.style.width = ""; // remove width from inline CSS
                        });
                        $thirdFooterRow.insertAfter($secondFooterRow);
                    }                                    
                    //FIRST FOOTER ROW
                    $this.jqGrid("footerData", "set", {Description1__c: "Total EX GST:", Otter_FFA_Total_Price__c:f});
                    //$this.jqGrid("footerData", "set", {Description1__c: "Total XXX GST:", Otter_FFA_Total_Price__c:f});
                    //SECOND FOOTER ROW
                    $secondFooterRow.find(">td[aria-describedby=" + this.id + "_Description1__c]").text("GST:");
                    $secondFooterRow.find(">td[aria-describedby=" + this.id + "_Otter_FFA_Total_Price__c]").text(m);
                    //THIRD FOOTER ROW
                    $thirdFooterRow.find(">td[aria-describedby=" + this.id + "_Description1__c]").text("Total INC GST:");
                    $thirdFooterRow.find(">td[aria-describedby=" + this.id + "_Otter_FFA_Total_Price__c]").text(l);

                }

这是第一次加载页面时的样子：

    Total EX GST:   $1,141.12
    GST:            $114.14
    Total INC GST:  $1255.26

页面 2 个中的 2 个
查看第 11 - 12 个，共 12 个

当我点击下一页或任何其他操作时，它的外观如下：

    Total EX GST:   $1,141.12
    Total INC GST:  $1255.26
    Total INC GST:  $1255.26

页面 2 个中的 2 个
查看第 11 - 12 个，共 12 个

任何建议都会非常感激。我在 Salesforce 中使用这个 jqgrid，但最后只是一个 HTML 页面。我想上传图片，但我是社区的新手，所以我不能。

谢谢。

Answer 1

对于任何有同样问题的人，如果您指定一个唯一的 Id，那么您可以引用该 Id 并更新它。这里是上述问题的解决方案：

                    loadComplete: function () {//for showing default edit
                    var $this = $(this), ids = $this.jqGrid('getDataIDs'), i, l = ids.length;
                    for (i = 0; i < l; i++) {
                    }
                    //In order to have three totals
                    var $this = $(this),
                    $footerRow = $(this.grid.sDiv).find("tr.footrow"),
                    $secondFooterRow = $(this.grid.sDiv).find("tr.myfootrow"),
                    $thirdFooterRow = $(this.grid.sDiv).find("tr.mythirdfootrow");

                    //$secondFooterRow,$thirdFooterRow;
                    var f = {!optyObj.Otter_FFA_Total_Before_GST__c};
                    var m = custFormat({!optyObj.Otter_FFA_Grand_Total_GST__c});
                    var l = custFormat({!optyObj.Otter_FFA_Grand_Total_After_GST__c});


                    if ($secondFooterRow.length === 0) {
                        // add second row of the footer if it's not exist
                        $secondFooterRow = $footerRow.clone();
                        $secondFooterRow.removeClass("footrow").addClass("myfootrow ui-widget-content");
                        $secondFooterRow.attr('id', 'secondFooterRow');
                        $secondFooterRow.children("td").each(function () {
                            this.style.width = ""; // remove width from inline CSS
                        });
                        $secondFooterRow.insertAfter($footerRow);
                    }      

                    if ($thirdFooterRow.length === 0) {
                        // add second row of the footer if it's not exist
                        $thirdFooterRow = $footerRow.clone();
                        $thirdFooterRow.removeClass("footrow").addClass("mythirdfootrow ui-widget-content");
                        $thirdFooterRow.attr('id', 'thirdFooterRow');
                        $thirdFooterRow.children("td").each(function () {
                            this.style.width = ""; // remove width from inline CSS
                        });
                        $thirdFooterRow.insertAfter($secondFooterRow);
                    } 

                    //FIRST FOOTER ROW
                    //$this.jqGrid("footerData", "set", {Description1__c: "Total EX GST:<br><br>GST:<br><br>Total INC GST:", Otter_FFA_Total_Price__c:f}, {Description1__c: "Total EX GST:<br><br>GST:<br><br>Total INC GST:", Otter_FFA_Total_Price__c:f});
                    $this.jqGrid("footerData", "set", {Description1__c: "Total EX GST:", Otter_FFA_Total_Price__c:f});
                    //SECOND FOOTER ROW
                    $secondFooterRow.find(">td[aria-describedby=" + this.id + "_Description1__c]").text("GST:");
                    $secondFooterRow.find(">td[aria-describedby=" + this.id + "_Otter_FFA_Total_Price__c]").attr('id', 'secondFooterRow_Otter_FFA_Total_Price__c');
                    $secondFooterRow.find(">td[aria-describedby=" + this.id + "_Otter_FFA_Total_Price__c]").text(m);
                    //THIRD FOOTER ROW
                    $thirdFooterRow.find(">td[aria-describedby=" + this.id + "_Description1__c]").text("Total INC GST:");
                    $thirdFooterRow.find(">td[aria-describedby=" + this.id + "_Otter_FFA_Total_Price__c]").attr('id', 'thirdFooterRow_Otter_FFA_Total_Price__c');
                    $thirdFooterRow.find(">td[aria-describedby=" + this.id + "_Otter_FFA_Total_Price__c]").text(l);

                }

            });