JQGRID + Timer + setGroupHeaders = 多个标题分组行

Question

我正在寻找一些建议。我正在构建一个具有 60 秒计时器 (javascript) 的 HTML 页面，它将使用来自我的服务器的最新数据刷新 jqGrid (v4.2.0)。我让它工作正常，并想添加新的 setGroupHeaders 选项以将字段组合在一起。我将代码放在 gridcomplete 中以添加标题分组，但我每 60 秒就会得到重复的标题。我想知道在重新加载网格后不会重复创建标题分组的最佳位置在哪里？

谢谢！

$(document).ready(function () {
    ckTimer = setTimeout("sendTimer();", 1000);
});

function sendTimer() {
    var d = new Date();
    document.getElementById('currentDay1').innerHTML = d.toDateString() + "       " + d.toLocaleTimeString();
    document.getElementById('currentDay2').innerHTML = d.toDateString() + "       " + d.toLocaleTimeString();
    var sec = d.getSeconds();
    ckTimer = setTimeout("sendTimer();", (60 - sec) * 1000);
    jQuery("#Report2").jqGrid().trigger('reloadGrid');
    if (rptframe)
        if (rptframe.reload)
            rptframe.reload();
}

    $(function () {
        jQuery("#Report2").jqGrid({
            url: 'DashboardHandler.ashx?act=DetailReport',
            datatype: 'json',
            height: 250,
            width: 1200,
            colNames: ['Interval', 'Volume (Offered)', 'Service Level', 'Average Speed To Answer', 'Abandon Rate', 'Average Handle Time', ' ', 'Volume (Offered)', 'Service Level', 'Average Speed To Answer', 'Abandon Rate', 'Average Handle Time', '', ''],
            colModel: [
                { name: 'Interval', index: 'Interval', width: 125, sortable: false, align: "left" },
                { name: 'TSGVolume', index: 'TSGVolume', width: 100, sortable: false, align: "center" },
                { name: 'TSGCalcSLA', index: 'TSGCalcSLA', width: 100, sortable: false, align: "center" },
                { name: 'TSGASA', index: 'TSGASA', width: 100, sortable: false, align: "center" },
                { name: 'TSGAbnd', index: 'TSGAbnd', width: 100, sortable: false, align: "center" },
                { name: 'TSGAHT', index: 'TSGAHT', width: 100, sortable: false, align: "center" },
                { name: 'space', index: 'space', width: 50, sortable: false, align: "center" },
                { name: 'SCVolume', index: 'SCVolume', width: 100, sortable: false, align: "center" },
                { name: 'SCCalcSLA', index: 'SCCalcSLA', width: 100, sortable: false, align: "center" },
                { name: 'SCASA', index: 'SCASA', width: 100, sortable: false, align: "center" },
                { name: 'SCAbnd', index: 'SCAbnd', width: 100, sortable: false, align: "center" },
                { name: 'SCAHT', index: 'SCAHT', width: 100, sortable: false, align: "center" },
                { name: 'TSGASA_H', index: 'TSGASA_H', width: 0, sortable: false, align: "center", hidden: true },
                { name: 'SCASA_H', index: 'SCASA_H', width: 0, sortable: false, align: "center", hidden: true }
            ],
            rowNum: 100,
            rowList: [100, 250, 500],
            pager: '#Report2Pager',
            viewrecords: true,
            gridComplete: setClr
        })
        jQuery("#Report2").jqGrid('navGrid', '#Report2Pager', { edit: false, add: false, del: false });
    });
    jQuery("#Report2").jqGrid('setGroupHeaders', {
        useColSpanStyle: false,
        groupHeaders: [
                { startColumnName: 'TSGVolume', numberOfColumns: 5, titleText: 'TSG' },
                { startColumnName: 'SCVolume', numberOfColumns: 5, titleText: 'Solution Center' }
            ]
    });

function setClr() {
        var i, val;
        for (i = 1; i <= 27; i++) {
            val = $('#Report2').jqGrid('getRowData', i);
            if (val["TSGCalcSLA"] < 70)
                $('#Report2').jqGrid('setCell', i, "TSGCalcSLA", '', 'red-highlight');
            else if (val["TSGCalcSLA"] > 80)
                $('#Report2').jqGrid('setCell', i, "TSGCalcSLA", '', 'green-highlight');
            else
                $('#Report2').jqGrid('setCell', i, "TSGCalcSLA", '', 'yellow-highlight');

            if (val["SCCalcSLA"] < 70)
                $('#Report2').jqGrid('setCell', i, "SCCalcSLA", '', 'red-highlight');
            else if (val["SCCalcSLA"] > 80)
                $('#Report2').jqGrid('setCell', i, "SCCalcSLA", '', 'green-highlight');
            else
                $('#Report2').jqGrid('setCell', i, "SCCalcSLA", '', 'yellow-highlight');

            if (val["TSGASA_H"] > 60)
                $('#Report2').jqGrid('setCell', i, "TSGASA", '', 'red-highlight');
            else if (val["TSGASA_H"] <= 30)
                $('#Report2').jqGrid('setCell', i, "TSGASA", '', 'green-highlight');
            else
                $('#Report2').jqGrid('setCell', i, "TSGASA", '', 'yellow-highlight');

            if (val["SCASA_H"] > 60)
                $('#Report2').jqGrid('setCell', i, "SCASA", '', 'red-highlight');
            else if (val["SCASA_H"] <= 30)
                $('#Report2').jqGrid('setCell', i, "SCASA", '', 'green-highlight');
            else
                $('#Report2').jqGrid('setCell', i, "SCASA", '', 'yellow-highlight');

            if (val["TSGAbnd"] > 4.6)
                $('#Report2').jqGrid('setCell', i, "TSGAbnd", '', 'red-highlight');
            else if (val["TSGAbnd"] <= 4.4)
                $('#Report2').jqGrid('setCell', i, "TSGAbnd", '', 'green-highlight');
            else
                $('#Report2').jqGrid('setCell', i, "TSGAbnd", '', 'yellow-highlight');

            if (val["SCAbnd"] > 4.6)
                $('#Report2').jqGrid('setCell', i, "SCAbnd", '', 'red-highlight');
            else if (val["SCAbnd"] <= 4.4)
                $('#Report2').jqGrid('setCell', i, "SCAbnd", '', 'green-highlight');
            else
                $('#Report2').jqGrid('setCell', i, "SCAbnd", '', 'yellow-highlight');
        }
            jQuery("#Report2").jqGrid('setGroupHeaders', {
                useColSpanStyle: false,
                groupHeaders: [
                { startColumnName: 'TSGVolume', numberOfColumns: 5, titleText: 'TSG' },
                { startColumnName: 'SCVolume', numberOfColumns: 5, titleText: 'Solution Center' }
            ]
            });
    };
    function reload() {
        jQuery("#Report2").jqGrid().trigger('reloadGrid');
    }

Answer 1

我还有多个标题，因为我使用 setGroupHeaders 的脚本标记位于用于显示我的 jQgrid 的 div 内。

而这个 div 是 jqueryui Dialog 的 div。

所以每次我通过按钮打开对话框时，都会添加一个新的groupHeader。

为了解决这个问题，我把脚本标签移到了对话框的div标签之外。

我希望它会帮助别人。

解决办法：

<div id="dialog_div">
    <table id="my_grid"></table>
    <div id="grid_pager"></div>
</div>

<script>
  // Initialize the grid here
</script>