Author Topic: paramquery memory release or destroy  (Read 2274 times)

msdnweixiao

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 21
    • View Profile
paramquery memory release or destroy
« on: January 06, 2021, 09:41:02 am »
hello,

our project is too laggy to call showModalDialog to open the pop-up page. Every time we open the pop-up page, we call $("#myGrid").PqGrid (obj). Once, after about fifty times, the memory footprint of IE will become very stuck, which will result in the death of web pages and slow query of popups.
Now call window.close () close the pop-up window.
Does PQ have a way to release memory or destroy it?

thank you.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: paramquery memory release or destroy
« Reply #1 on: January 06, 2021, 09:46:36 am »
$("#myGrid").pqGrid('destroy') should be called before any subsequent call to $("#myGrid").pqGrid( obj )

or

$("#myGrid").pqGrid('refresh') could be called instead of $("#myGrid").pqGrid( obj ) when popup is opened after first close.

msdnweixiao

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 21
    • View Profile
Re: paramquery memory release or destroy
« Reply #2 on: January 12, 2021, 12:32:46 pm »
it's not worked.

Because the showModalDialog I used to open the page of paramquery,
so $("#myGrid").PqGrid (obj) before calling $("#myGrid").PqGrid ('destroy'), IE will report false: Error: cannot call methods on pqGrid prior to initialization; attempted to call method 'destroy'.
and I'll try again window.close () the method is called before, but the memory can not be released.

Is there any other good way to free memory?

Here's my code:

// public.js  Call pop-up method
var data = showModalDialog("/views/html/dj_query.html", params1, dialogStyle);

// dj_query.html
<head>
<script type="text/javascript">
        var paramsO = window.dialogArguments;
        var prevRowIdx = -1, prevCellIdx = 0;
        var subsql, gridRows = 0;
        var grid, subGrid, flds;
        var hasSub = true;
        var prevCount = 0;
        var gridHeight = 400;

        $(function () {
            // 加载方案数据
            $.ajax({
                url: '/s/form/service?service=zl_sel_data',
                type: 'POST',
                data: 'params=' + Util.toJSONString(paramsO) + "&rand=" + Math.random(),
                success: function (stru) {
                    subsql = stru.data.zcxSql;

                    // 判断是否有子查询,自动调整高度
                    subsql = subsql.trim();
                    if (subsql == '' || typeof (subsql) == 'undifined') {
                        $("#subGrid").css('display', 'none');
                        $("#myGrid").height(580);
                        gridHeight = 580;
                        hasSub = false;
                    }

                    // 初始化主表格
                    initGrid(stru);
                }
            });
        });

        function initGrid(stru) {
            var data = stru.data;

            var colModel = [];
            var tableHeaders = [];
            try {
                tableHeaders = JSON.parse(data.tableHeader);
            } catch (err) {
                console.log(data.tableHeader);
                alert('主表格表头JSON解析异常.');
                return;
            }

            for (var i = 0; i < tableHeaders.length; i++) {
                var thd = tableHeaders;

                var nhd = {};
                nhd.title = thd.caption;
                nhd.dataIndx = thd.name;
                switch (thd.dataType) {
                    case '实数':
                        nhd.dataType = 'float';
                        break;
                    case '整数':
                        nhd.dataType = 'integer';
                        break;
                    default:
                        nhd.dataType = 'string';
                }
                nhd.width = parseInt(thd.displayWidth) + 30;
                nhd.align = 'left';
                nhd.editable = false;
                if (thd.visible == 'Y') {
                    nhd.hidden = false;
                    if (prevCellIdx == 0) {
                        prevCellIdx = i;
                    }
                } else {
                    nhd.hidden = true;
                }

                colModel.push(nhd);
            }

            var tableData = [];
            try {
                tableData = JSON.parse(data.tableData);
            } catch (err) {
                console.log(data.tableData);
                alert('主表格数据JSON解析异常.');
                return;
            }
            gridRows = tableData.length;

            var obj = {
                roundCorners: false,
                height: gridHeight,
                showTitle: false,
                stripeRows: true,
                showTop: false,
                showBottom: false,
                sortable: true,
                fillHandle: '',
                selectionModel: {type: 'cell', mode: 'block'},
                scrollModel: {autoFit: false},
                virtualX: true,
                virtualY: true,
                resizable: false,
                wrap: false,
                hwrap: false,
                numberCell: {show: true, resizable: true, title: "#"},
                colModel: colModel,
                columnBorders: true,
                rowBorders: true,
                dataModel: {
                    paging: null,
                    dataType: "JSON",
                    data: tableData
                },
                selectChange: function (event, ui) {
                    if (ui.selection.getSelection().length === 0) {
                        return;
                    }

                    var rowIndx = ui.selection.getSelection()[0].rowIndx;
                    if (prevRowIdx != rowIndx) {
                        prevRowIdx = rowIndx;
                        grid.setSelection(null);
                        grid.setSelection({rowIndx: rowIndx});

                        if (!hasSub) {
                            return;
                        }

                        var selData = $("#myGrid").pqGrid("getRowData", {rowIndxPage: rowIndx});
                        if (selData != null && selData) {
                            var newsql = getSQL(selData, subsql);
                            loadSubData(newsql);
                        }
                    }
                },
                rowInit: function (ui) {
                    var rowData = ui.rowData;
                    var fcolor = rowData.FCOLOR;
                    if (!fcolor) {
                        fcolor = rowData.fcolor;
                    }
                    if (fcolor) {
                        return {style: 'color:' + fcolor.replace('1', '')};
                    }
                },
                rowDblClick: function (event, ui) {
                    var rowData = $("#myGrid").pqGrid("getRowData", {rowIndx: ui.rowIndx});
                    window.returnValue = rowData;
                    window.close();
                    return true;
                },
                cellKeyDown: function (event, ui) {
                    if (event.keyCode === 13) {
                        var rowData = $("#myGrid").pqGrid("getRowData", {rowIndx: ui.rowIndx});
                        window.returnValue = rowData;
                        window.close();
                        return true;
                    }
                }
            };

            $("#myGrid").pqGrid('destroy')
            $("#myGrid").pqGrid(obj);
            grid = $("#myGrid").pqGrid("getInstance").grid;

            if (hasSub && tableData.length > 0) {
                initSubGrid(tableData[0]);
            }
            $("#myGrid").pqGrid("setSelection", {rowIndx: 0, colIndx: prevCellIdx});
            $("#myGrid").pqGrid("setSelection", {rowIndx: 0});
        }

        function initSubGrid(hzData) {
            var newSql = getSQL(hzData, subsql);
            var params = {"sql": newSql};
            var result = WebService.call("form.loadSQLField", params);
            try {
                result = JSON.parse(result);
            } catch (err) {
                console.log(result);
                alert('子表格表头JSON解析异常.');
                return;
            }

            var subFlds = [];
            var subModel = [];
            for (var i = 0; i < result.length; i++) {
                var thd = result;

                var nhd = {};
                nhd.title = thd.displaylabel;
                nhd.dataIndx = thd.fieldname;
                switch (thd.dataType) {
                    case '实数':
                        nhd.dataType = 'float';
                        break;
                    case '整数':
                        nhd.dataType = 'integer';
                        break;
                    default:
                        nhd.dataType = 'string';
                }
                nhd.width = parseInt(thd.displaywidth) + 30;
                nhd.align = 'left';
                nhd.editable = false;
                if (thd.visible == 'Y') {
                    nhd.hidden = false;
                } else {
                    nhd.hidden = true;
                }

                subModel.push(nhd);
                subFlds.push(thd.fieldname);
            }

            flds = subFlds.join(";");

            var subObj = {
                roundCorners: false,
                height: 180,
                showTitle: false,
                stripeRows: true,
                showTop: true,
                showBottom: false,
                sortable: true,
                fillHandle: '',
                selectionModel: {type: 'cell', mode: 'block'},
                scrollModel: {autoFit: false},
                virtualX: true,
                virtualY: true,
                resizable: true,
                wrap: false,
                hwrap: false,
                collapsible: {on: false, toggle: false},
                numberCell: {show: true, resizable: true, title: "#"},
                colModel: subModel,
                columnBorders: true,
                rowBorders: true,
                rowInit: function (ui) {
                    var rowData = ui.rowData;
                    var fcolor = rowData.FCOLOR;
                    if (!fcolor) {
                        fcolor = rowData.fcolor;
                    }
                    if (fcolor) {
                        return {style: 'color:' + fcolor.replace('1', '')};
                    }
                },
                cellKeyDown: function (event, ui) {
                    if (event.keyCode === 67) {
                        var tdd = $("#subGrid").pqGrid("getCell", {rowIndx: ui.rowIndx, dataIndx: ui.dataIndx});
                        if (window.clipboardData) {
                            //清空操作系统粘贴板
                            window.clipboardData.clearData();
                            //将需要复制的内容复制到操作系统粘贴板
                            window.clipboardData.setData("Text", $(tdd).text());
                        }
                    }
                }
            };

            $("#subGrid").pqGrid(subObj);
            subGrid = $("#subGrid").pqGrid("getInstance").grid;
        }

        function loadSubData(sql) {
            subGrid.option("dataModel", {
                location: "remote",
                dataType: "JSON",
                method: "POST",
                postData: {sql: sql},
                url: '/form/servlet?s=form.scheme.dynscroll&page=false&flds=' + flds + "&t=" + new Date().getTime(),
                getData: function (dataDoc, textStatus, jqXHR) {
                    return {
                        data: dataDoc.rows,
                        totalRecords: dataDoc.total_count
                    };
                }
            });
            subGrid.refreshDataAndView()
        }

        function getSQL(data, ssql) {
            for (var key in data) {
                ssql = ssql.replace(new RegExp(":" + key, "gi"), data[key]);
            }
            return ssql;
        }

        //ESC关闭窗口
        $(document).keydown(function (event) {
            var keyCode = event.keyCode;
            if (keyCode === 27) {
                window.returnValue = false;
                self.close();
            }
        });
    </script>
</head>
<body tyle="margin:0px;padding: 0px;">
<div id="myGrid" style="height:400px;margin-top:5px;width: 99%;margin:0 auto;"></div>
<br>
<div id="subGrid" style="height:170px;width: 99%;margin:0 auto;"></div>
</body>

msdnweixiao

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 21
    • View Profile
Re: paramquery memory release or destroy
« Reply #3 on: January 12, 2021, 03:19:58 pm »
The number of rows of the parent table and the child table is uncertain,
but it is generally no more than 200 rows, and the number of columns is about 40 columns.

Will the way I use API to load data cause memory occupation.
Then, when the pop-up window is closed, clean up the occupied memory?

thank you.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: paramquery memory release or destroy
« Reply #4 on: January 12, 2021, 05:28:59 pm »
Quote
$("#myGrid").PqGrid (obj) before calling $("#myGrid").PqGrid ('destroy'), IE will report false: Error: cannot call methods on pqGrid prior to initialization; attempted to call method 'destroy'.

You could create the grid when popup is opened and destroy it when popup is closed.

Code: [Select]
open: function (evt, ui) {   
    $("#myGrid").pqGrid(obj);
},
close: function () {
    $("#myGrid").pqGrid('destroy');
},

Example: https://stackblitz.com/edit/paramquery-demo-popup?file=index.html