Jquery JQGRID+；定时器+；setGroupHeaders=多个标题分组行

我在找几个指针。我正在构建一个HTML页面，它有一个60秒的计时器（javascript），可以用我服务器上的最新数据刷新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');
    }

$（文档）.ready（函数（）{
ckTimer=setTimeout（“sendTimer（）；”，1000）；
});
函数sendTimer（）{
var d=新日期（）；
document.getElementById（'currentDay1'）。innerHTML=d.toDateString（）+“”+d.toLocaleTimeString（）；
document.getElementById（'currentDay2'）。innerHTML=d.toDateString（）+“”+d.toLocaleTimeString（）；
var sec=d.getSeconds（）；
ckTimer=setTimeout（“sendTimer（）；”，（60秒）*1000）；
jQuery（“#Report2”）.jqGrid（）.trigger（'reloadGrid'）；
如果（帧）
if（rptframe.reload）
rptframe.reload（）；
}
$（函数（）{
jQuery（“#Report2”）.jqGrid({
url:'DashboardHandler.ashx？act=DetailReport'，
数据类型：“json”，
身高：250，
宽度：1200，
colNames:['Interval'、'Volume（provided）'、'Service Level'、'Average Speed To response'、'放弃率'、'Average Handle Time'、'Average Handle Time'、'Volume（provided）'、'Service Level'、'Average Speed To response'、'Average Handle Time'、'，
colModel：[
{name:'Interval'，index:'Interval'，width:125，sortable:false，align:'left'}，
{name:'TSGVolume'，index:'TSGVolume'，宽度：100，可排序：false，对齐：“center”}，
{name:'TSGCalcSLA'，index:'TSGCalcSLA'，宽度：100，可排序：false，对齐：“中心”}，
{name:'TSGASA'，index:'TSGASA'，宽度：100，可排序：false，对齐：“center”}，
{name:'TSGAbnd'，index:'TSGAbnd'，宽度：100，可排序：false，对齐：“center”}，
{name:'TSGAHT'，index:'TSGAHT'，宽度：100，可排序：false，对齐：“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'，宽度：100，可排序：false，对齐：“center”}，
{name:'SCASA'，index:'SCASA'，width:100，sortable:false，align:“center”}，
{name:'scabd'，index:'scabd'，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}
],
行数：100，
行列表：[100250500]，
传呼机：“#Report2Page”，
viewrecords：是的，
gridComplete:setClr
})
jQuery（“#Report2”）.jqGrid（'navGrid'，'#report2page'，{edit:false，add:false，del:false}）；
});
jQuery（“#Report2”）.jqGrid（'setGroupHeaders'{
useColSpanStyle:false，
组标题：[
{startColumnName:'TSGVolume'，numberOfColumns:5，titleText:'TSG'}，
{startColumnName:'SCVolume'，numberOfColumns:5，titleText:'Solution Center'}
]
});
函数setClr（）{
varⅠ，val；
对于（i=1；i 80）
$（'#Report2'）.jqGrid（'setCell'，i，“TSGCalcSLA”，“绿色突出显示”）；
其他的
$（'#Report2'）.jqGrid（'setCell'，i，“TSGCalcSLA”，“黄色突出显示”）；
如果（val[“SCCalcSLA”]<70）
$（'#Report2'）.jqGrid（'setCell'，i，“SCCalcSLA”，“red highlight'）；
否则如果（val[“SCCalcSLA”]>80）
$（'#Report2'）.jqGrid（'setCell'，i，“SCCalcSLA”，“绿色高亮显示”）；
其他的
$（'#Report2'）.jqGrid（'setCell'，i，“SCCalcSLA”，“黄色突出显示”）；
如果（val[“TSGASA_H”]>60）
$（'#Report2'）.jqGrid（'setCell'，i，“TSGASA”，“red highlight'）；
否则如果（val[“TSGASA_H”]60）
$（'#Report2'）.jqGrid（'setCell'，i，“SCASA”，“red highlight'）；
否则如果（val[“SCASA_H”]4.6）
$（'#Report2'）.jqGrid（'setCell'，i，“TSGAbnd”，“red highlight'）；
否则，如果（val[“tsgabd”]4.6）
$（'#Report2'）.jqGrid（'setCell'，i，“scabd”，“red highlight'）；
else if（val[“SCAbnd”]我也有多个标题，因为我在其中使用的脚本标记
setGroupHeaders
位于用于显示jQgrid的
div
内

这个div是
jqueryui对话框
的div

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

为了解决这个问题，我将脚本标记移到对话框div标记的外部

我希望它能帮助别人

解决方案：

//在这里初始化网格

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

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