Блог

Я ищу несколько указателей. Я создаю 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()   "amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;"   d.toLocaleTimeString();
    document.getElementById('currentDay2').innerHTML = d.toDateString()   "amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;"   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');
    }
 

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

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

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

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

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

Решение :

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

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