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() + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + d.toLocaleTimeString();
    document.getElementById('currentDay2').innerHTML = d.toDateString() + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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');
    }

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>

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

1 个答案:

解决方案：