JQGRID + Timer + setGroupHeaders = несколько строк группировки заголовков

Question

Я ищу несколько указателей.Я создаю 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');
    }

Answer 1

У меня также было несколько заголовков, потому что тег скрипта, в котором я использовал setGroupHeaders, находился внутри div, используемого для отображения моего jQgrid.

И этот div был div jqueryui Dialog.

Таким образом, каждый раз, когда я открывал свой диалог с помощью кнопки, добавлялся новый groupHeader.

Чтобы решить эту проблему, Я переместил тег сценария за пределы диалогового окна.tag .

Надеюсь, это поможет кому-то еще.

Решение:

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

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