js（tab）包括面包削初始化，搜索区初始化，选项卡初始化

/**
 * 新希望分析报表页面样式初始化脚本,包括面包削初始化，搜索区初始化，选项卡初始化
 *
 * 此文件应在jquery核心文件之后引入
 */
(function() {
    var analysisreport_style_init = {};
    var tabIds = [];
    var callbacks = [];

    // 面包削初始化
    analysisreport_style_init.initCrumbs = function(names) {
        $("body").prepend("<div id=\"div_crumbs\" style=\"width:98%\" class=\"crumbs\"></div>");
        var crumbsContent = "";
        for ( var i = 0; i < names.length; i++) {
            if (i == names.length - 1) {
                crumbsContent += "<span><b>" + names[i] + "</b></span>";
            } else {
                crumbsContent += "<span>" + names[i]
                        + "</span>&nbsp;&gt;&nbsp;";
            }
        }
        $("#div_crumbs").append(crumbsContent);
    };

    // 搜索区初始化
    analysisreport_style_init.initSearchArea = function(content) {
        $("#div_crumbs").after(
                "<div id=\"div_searchArea\" class=\"search\"></div>");
        // text button select hidden
        if (null != content) {
            for ( var i = 0; i < content.length; i++) {
                var element = "";
                if (content[i]["type"] == "select") {
                    if (content[i].hasOwnProperty("title")
                            && content[i]["title"] != "") {
                        element = "<span>" + content[i]["title"] + "：</span>";
                    }

                    element += "<select id=\"" + content[i]["id"]
                            + "\" class=\"" + content[i]["className"]
                            + "\" style=\"" + content[i]["style"] + "\">";

                    if (content[i].hasOwnProperty("values")
                            && "" != content[i]["values"]) {
                        for ( var j = 0; j < content[i]["values"].length; j++) {
                            element += "<option value=\""
                                    + content[i]["values"][j]["value"] + "\">"
                                    + content[i]["values"][j]["text"]
                                    + "</option>";
                        }
                    }

                    element += "</select>";
                } else if (content[i]["type"] == "button") {
                    element += "<input type=\"button\" id=\""
                            + content[i]["id"] + "\" class=\""
                            + content[i]["className"] + "\" style=\""
                            + content[i]["style"] + "\" value=\""
                            + content[i]["title"] + "\" />";
                } else {
                    if (content[i].hasOwnProperty("title")
                            && content[i]["title"] != "") {
                        element = "<span>" + content[i]["title"] + "：</span>";
                    }

                    element += "<input type=\"" + content[i]["type"]
                            + "\" id=\"" + content[i]["id"] + "\" class=\""
                            + content[i]["className"] + "\" style=\""
                            + content[i]["style"] + "\" />";
                }

                $("#div_searchArea").append(element);
            }
        }
    };

    // 添加搜索区内容
    analysisreport_style_init.addSearchAreaElement = function(content) {
        for ( var i = 0; i < content.length; i++) {
            var element = "";
            if (content[i]["type"] == "select") {
                if (content[i].hasOwnProperty("title")
                        && content[i]["title"] != "") {
                    element = "<span>" + content[i]["title"] + "：</span>";
                }

                element += "<select id=\"" + content[i]["id"] + "\" class=\""
                        + content[i]["className"] + "\" style=\""
                        + content[i]["style"] + "\">";

                if (content[i].hasOwnProperty("values")
                        && "" != content[i]["values"]) {
                    for ( var j = 0; j < content[i]["values"].length; j++) {
                        element += "<option value=\""
                                + content[i]["values"][j]["value"] + "\">"
                                + content[i]["values"][j]["text"] + "</option>";
                    }
                }

                element += "</select>";
            } else if (content[i]["type"] == "button") {
                element += "<input type=\"button\" id=\"" + content[i]["id"]
                        + "\" class=\"" + content[i]["className"]
                        + "\" style=\"" + content[i]["style"] + "\" value=\""
                        + content[i]["title"] + "\" />";
            } else {
                if (content[i].hasOwnProperty("title")
                        && content[i]["title"] != "") {
                    element = "<span>" + content[i]["title"] + "：</span>";
                }

                element += "<input type=\"" + content[i]["type"] + "\" id=\""
                        + content[i]["id"] + "\" class=\""
                        + content[i]["className"] + "\" style=\""
                        + content[i]["style"] + "\" />";
            }

            $("#div_searchArea").append(element);
        }
    };

    // 选项卡初始化
    analysisreport_style_init.initTabs = function(id, display, content,
            targetId) {
        if (null != targetId) {
            if (0 == display) {
                $("#" + targetId).after(
                        "<div style=\"display:none; margin-top: 10px;\" class=\"message\" id=\""
                                + id + "\"><ul id=\"ul_" + id
                                + "\"></ul></div>");
            } else {
                $("#" + targetId).after(
                        "<div style=\"margin-top: 10px;\" class=\"message\" id=\"" + id + "\"><ul id=\"ul_"
                                + id + "\"></ul></div>");
            }
        } else {
            if (0 == display) {
                $("body").append(
                        "<div style=\"display:none; margin-top: 10px;\" class=\"message\" id=\""
                                + id + "\"><ul id=\"ul_" + id
                                + "\"></ul></div>");
            } else {
                $("body").append(
                        "<div style=\"margin-top: 10px;\" class=\"message\" id=\"" + id + "\"><ul id=\"ul_"
                                + id + "\"></ul></div>");
            }
        }

        for ( var i = 0; i < content.length; i++) {
            tabIds.push(content[i]["id"]);
            callbacks.push(content[i]["callback"]);
            if (0 == i) {
                $("#ul_" + id).append(
                        "<li><a class=\"mes_click\" name=\"" + content[i]["id"]
                                + "\" href=\"javascript:void(0);\">" + content[i]["title"]
                                + "</a></li>");
            } else {
                $("#ul_" + id).append(
                        "<li><a name=\"" + content[i]["id"] + "\" href=\"javascript:void(0);\">"
                                + content[i]["title"] + "</a></li>");
            }
        }

        // 添加绑定事件
        var tabs_a = $("#ul_" + id + " a");
        $.each(tabs_a, function(index, e) {
            $(e).bind("click", function() {
                if (null == $(this).attr("class")) {
                    tabs_a.removeAttr("class");
                    $(this).attr("class", "mes_click");

                    var callbackName = "";
                    for ( var i = 0; i < tabIds.length; i++) {
                        if (tabIds[i] == $(this).attr("name")) {
                            $("#" + tabIds[i]).show();
                            callbackName = callbacks[i];
                        } else {
                            $("#" + tabIds[i]).hide();
                        }
                    }

                    eval(callbackName + "()");
                }
            });
        });
    };

    window.analysisreport_style_init = analysisreport_style_init;

})();

以上js文件需要在jquery核心文件之后引入

应用如下：

analysisreport_style_init.initCrumbs(["报表中心","分析报表","员工分析"]);
            analysisreport_style_init.initSearchArea();
            analysisreport_style_init.addSearchAreaElement([{id:"dept",title:"部门",type:"text",className:"text1"}]);
            analysisreport_style_init.addSearchAreaElement([{id:"dept_code",type:"hidden"}]);//用于存储选择的部门code
            analysisreport_style_init.addSearchAreaElement([{id:"search_month",title:"月份",type:"text",className:"text1 Wdate"}]);
            analysisreport_style_init.addSearchAreaElement([{id:"btn_search",title:"搜索",type:"button",className:"btn_blue"}]);
            analysisreport_style_init.initTabs("employeeAnalysisTab",1,[{title:"业务/技术人员占比",id:"tab_busi_tech_ratio",callback:"reloadBusiTechGrid"},{title:"推广/实证工作完成率",id:"tab_prom_empi_ratio",callback:"reloadPromEmpiGrid"},{title:"推广成果分析",id:"tab_promotionResults",callback:"tab_promotionResults_createChart"}]);

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 推广成果分析 -->
<div id="tab_promotionResults" style="display:none;">
<!-- 客户分布 -->
<table>
    <tr>
        <td>
           <div id="promotionResults_cusDistribution_columnContainer" style="width: 900px; height: 400px"></div>
        </td>
        <td>
            <div id="promotionResults_cusDistribution_pieContainer" style="width: 500px;"></div>
        </td>
    </tr>

    <!-- 订货情况 -->
   <tr>
        <td>
            <div id="promotionResults_orderNum_columnContainer" style="width: 900px; height: 400px"></div>
        </td>
        <td>
            <div id="promotionResults_orderNum_pieContainer" style="width: 500px;"></div>
        </td>
    </tr>

    <!-- 订货套餐情况 -->
    <tr>
        <td>
            <div id="promotionResults_mealNum_columnContainer"  style="width: 900px; height: 400px"></div>
        </td>
        <td>
            <div id="promotionResults_mealNum_pieContainer" style="width: 500px;"></div>
        </td>
    </tr>

    <!-- 汇总表格 -->
    <tr>
        <td colspan="2">
        <div id="promotionResultsTableContainer" style="1400px;"><table id="promotionResultsTable"></table></div>
        </td>
    </tr>
</table>
</div>
<script type="text/javascript">
    //全局变量命名空间
    var PROMOTION_RESULTS_TABLE = {};
    PROMOTION_RESULTS_TABLE.crumbArr = [];

    function tab_promotionResults_createChart() {
        tab_emplPercentage_click = false;
        tab_CompletionRate_click = false;
        tab_promotionResults_click = true;
        //标记 本页面是否查询过
        if (tab_promotionResults_flush) {
            return;
        }
        /* $("#promotionResults_cusDistribution_columnContainer").parent().css({
            "width" : document.body.clientWidth / 2,
            "float" : "left"
        });
        $("#promotionResults_cusDistribution_pieContainer").parent().css({
            "width" : document.body.clientWidth * 0.4,
            "float" : "right"
        }); */
        tab_promotionResults_flush = true;
        var ajaxOptions = {
            url : "${path}/r/analysis/employee/getPromotionResults.do",
            data : {
                deptCode : searchDeptCode,
                searchMonth : searchMonth
            }
        };
        REPORT_COMMON.HighCharts.createChart(ajaxOptions,
                cusDistribution_CreateColumnChart,
                cusDistribution_afterCreateColumnChart,
                "promotionResults_cusDistribution_columnContainer");
    };
    
    //客户人数分布柱状图创建完之后
    function cusDistribution_afterCreateColumnChart(r) {
        //创建客户人数占比饼状图
        var ajaxOptions = {
            data : r,
            isLoadLocalData : true
        };
        REPORT_COMMON.HighCharts.createChart(ajaxOptions,
                cusDistribution_CreatePieChart, cusDistribution_AfterCreatePieChart,
                "promotionResults_cusDistribution_pieContainer");
    }
    
    //客户人数分布饼状图创建完之后
    function cusDistribution_AfterCreatePieChart(r) {
        
        /* $("#promotionResults_orderNum_columnContainer").parent().css({
            "width" : document.body.clientWidth / 2,
            "float" : "left"
        });
        $("#promotionResults_orderNum_pieContainer").parent().css({
            "width" : document.body.clientWidth * 0.4,
            "float" : "right"
        }); */
        //创建订货量柱状图
        var ajaxOptions = {
            data : r,
            isLoadLocalData : true
        };
        REPORT_COMMON.HighCharts.createChart(ajaxOptions,
                orderNum_CreateColumnChart, orderNum_AfterCreateColumnChart,
                "promotionResults_orderNum_columnContainer");
    }
    
    //订货量占比柱状图创建完之后
    function orderNum_AfterCreateColumnChart(r) {
        //创建订货量饼状图
        var ajaxOptions = {
            data : r,
            isLoadLocalData : true
        };
        REPORT_COMMON.HighCharts.createChart(ajaxOptions,
                orderNum_CreatePieChart, orderNum_AfterCreatePieChart,
                "promotionResults_orderNum_pieContainer");
    };
    
    //订货量饼状图创建完之后
    function orderNum_AfterCreatePieChart(r) {
        
        /* $("#promotionResults_mealNum_columnContainer").parent().css({
            "width" : document.body.clientWidth / 2,
            "float" : "left"
        });
        $("#promotionResults_mealNum_pieContainer").parent().css({
            "width" : document.body.clientWidth * 0.4,
            "float" : "right"
        }); */
        //创建订货套餐柱状图
        var ajaxOptions = {
            data : r,
            isLoadLocalData : true
        };
        REPORT_COMMON.HighCharts.createChart(ajaxOptions,
                mealNum_CreateColumnChart, mealNum_AfterCreateColumnChart,
                "promotionResults_mealNum_columnContainer");
    };
    
    //订货套餐柱状图创建完之后
    function mealNum_AfterCreateColumnChart(r) {
        //创建订货套餐饼状图
        var ajaxOptions = {
            data : r,
            isLoadLocalData : true
        };
        REPORT_COMMON.HighCharts.createChart(ajaxOptions,
                mealNum_CreatePieChart, promotionResults_CreateTable,
                "promotionResults_mealNum_pieContainer");
    };
    
    
    //创建客户人数分布柱状图
    function cusDistribution_CreateColumnChart(r) {
        var chartData = r.data;
        //组装柱状图数据
        
        //总客户人数
        var totalCusNum =[];
        //新客户人数
        var newCusNum =[];
        for(var i=0;i<chartData.categories.length;i++){
            totalCusNum.push(chartData.seriesList[i].totalCusNum);
            newCusNum.push(chartData.seriesList[i].newCusNum);
        }
        var chartOptions = {
            chart : {
                type : 'column'
            },
            title : {
                text : searchDeptName + '推广工作客户人数分布'
            },
            xAxis : {
                categories : chartData.categories,
                title : {
                    text : '部门'
                }
            },
            yAxis : {
                title : {
                    text : '人数'
                },
                allowDecimals:false
            },
            series : [ {
                name : "总人数",
                data : totalCusNum,
                color:'#1ba8ed'
            },{
                name : "新客户人数",
                data : newCusNum,
                color:'#da533c'
            } ]
        };

        return chartOptions;
    };

    

    //创建推广客户占比饼状图
    function cusDistribution_CreatePieChart(r) {
        var chartData = r.data;
        //新客户总数
        var sumNewCus = 0;
        //总客户总数
        var sumTotalCus = 0;
        for ( var i = 0; i < chartData.categories.length; i++) {
            sumTotalCus = sumTotalCus + chartData.seriesList[i].totalCusNum;
            sumNewCus = sumNewCus + chartData.seriesList[i].newCusNum;
        }
        //老客户总数
        var sumOldCus = sumTotalCus - sumNewCus;
        //组装饼状图数据
        var data = [];
        var newCusData = {};
        newCusData.name = '新客户人数占比';
        newCusData.y = sumNewCus;
        newCusData.color = '#1ba8ed';
        data.push(newCusData);
        var oldCusData = {};
        oldCusData.name = '老客户人数占比';
        oldCusData.y = sumOldCus;
        oldCusData.color = '#da533c';
        data.push(oldCusData);
        
        var chartOptions = {
            chart : {
                type : 'pie'
            },
            title : {
                text : searchDeptName + '推广工作客户占比'
            },
            yAxis : {
                title : {
                    text : '客户数(人)'
                }
            },
            series : [ {
                name : "客户数",
                data : data
            } ]
        };

        return chartOptions;
    };
    
    //创建订货柱状图
    function orderNum_CreateColumnChart(r) {
        var chartData = r.data;
        //总订货量（吨）
        var totalOrderNum =[];
        //新客户订货量（吨）
        var newOrderNum =[];
        for(var i=0;i<chartData.categories.length;i++){
            totalOrderNum.push(chartData.seriesList[i].totalOrderNum);
            newOrderNum.push(chartData.seriesList[i].newOrderNum);
        }
        var chartOptions = {
            chart : {
                type : 'column'
            },
            title : {
                text : searchDeptName + '推广工作订货情况'
            },
            xAxis : {
                categories : chartData.categories
            },
            yAxis : {
                title : {
                    text : '订货量（吨）'
                },
                allowDecimals:false
            },
            series : [ {
                name : "总订货量（吨）",
                data : totalOrderNum,
                color:'#1ba8ed'
            },{
                name : "新客户订货量（吨）",
                data : newOrderNum,
                color:'#da533c'
            }  ]
        };

        return chartOptions;
    };

    

    //创建订货量占比饼状图
    function orderNum_CreatePieChart(r) {
        var chartData = r.data;
        
        //新客户订货量总量
        var sumTotalOrderNum = 0;
        //总客户订货量总量
        var sumNewOrderNum = 0;
        for ( var i = 0; i < chartData.categories.length; i++) {
            sumTotalOrderNum = sumTotalOrderNum + chartData.seriesList[i].totalOrderNum;
            sumNewOrderNum = sumNewOrderNum + chartData.seriesList[i].newOrderNum;
        }
        //老客户总数
        var sumOldOrderNum = sumTotalOrderNum - sumNewOrderNum;
        //组装饼状图数据
        var data = [];
        var newOrderData = {};
        newOrderData.name = '新客户订货量占比';
        newOrderData.y = sumNewOrderNum;
        newOrderData.color = '#1ba8ed';
        data.push(newOrderData);
        var oldOrderData = {};
        oldOrderData.name = '老客户订货量占比';
        oldOrderData.y = sumOldOrderNum;
        oldOrderData.color = '#da533c';
        data.push(oldOrderData);
        
        var chartOptions = {
            chart : {
                type : 'pie'
            },
            title : {
                text : searchDeptName + '推广工作订货量占比'
            },
            yAxis : {
                title : {
                    text : '订货量(吨)'
                }
            },
            series : [ {
                name : "订货量",
                data : data
            } ]
        };

        return chartOptions;
    };
    
    //创建订套餐柱状图
    function mealNum_CreateColumnChart(r) {
        var chartData = r.data;
        
        //总订货套餐（个）
        var totalMealNum =[];
        //新客户订货套餐（个）
        var newMealNum =[];
        for(var i=0;i<chartData.categories.length;i++){
            totalMealNum.push(chartData.seriesList[i].totalMealNum);
            newMealNum.push(chartData.seriesList[i].newMealNum);
        }
        var chartOptions = {
            chart : {
                type : 'column'
            },
            title : {
                text : searchDeptName + '推广工作订套餐情况'
            },
            xAxis : {
                categories : chartData.categories
            },
            yAxis : {
                title : {
                    text : '套餐数（个）'
                },
                allowDecimals:false
            },
            series : [ {
                name : "总订货套餐（个）",
                data : totalMealNum,
                color:'#1ba8ed'
            }, {
                name : "新客户订货套餐（个）",
                data : newMealNum,
                color:'#da533c'
            } ]
        };

        return chartOptions;
    };

    

    //创建订套餐数占比饼状图
    function mealNum_CreatePieChart(r) {
        var chartData = r.data;
        
        //新客户订货套餐数总量
        var sumTotalMealNum = 0;
        //总客户订货套餐数总量
        var sumNewMealNum = 0;
        for ( var i = 0; i < chartData.categories.length; i++) {
            sumTotalMealNum = sumTotalMealNum + chartData.seriesList[i].totalMealNum;
            sumNewMealNum = sumNewMealNum + chartData.seriesList[i].newMealNum;
        }
        //老客户订货套餐数总量
        var sumOldMealNum = sumTotalMealNum - sumNewMealNum;
        //组装饼状图数据
        var data = [];
        var newMealData = {};
        newMealData.name = '新客户订货套餐数占比';
        newMealData.y = sumNewMealNum;
        newMealData.color = '#1ba8ed';
        data.push(newMealData);
        var oldMealData = {};
        oldMealData.name = '老客户订货套餐数占比';
        oldMealData.y = sumOldMealNum;
        oldMealData.color = '#da533c';
        data.push(oldMealData);
        
        var chartOptions = {
            chart : {
                type : 'pie'
            },
            title : {
                text : searchDeptName + '推广工作订货套餐数占比'
            },
            yAxis : {
                title : {
                    text : '订货套餐数(个)'
                }
            },
            series : [ {
                name : "订货套餐数",
                data : data
            } ]
        };

        return chartOptions;
    };
    
    function promotionResults_CreateTable(r){
        var chartData = r.data;
        //组装表格数据
        var data = [];
        
        //新客户总数
        var sumNewCus = 0;
        //总客户总数
        var sumTotalCus = 0;
        
        //新客户订货量总量
        var sumTotalOrderNum = 0;
        //总客户订货量总量
        var sumNewOrderNum = 0;
        
        //新客户订货套餐数总量
        var sumTotalMealNum = 0;
        //总客户订货套餐数总量
        var sumNewMealNum = 0;
        
        var objTotal = {};
        objTotal.deptName = '合计';
        objTotal.totalCusNum = sumTotalCus;
        objTotal.newCusNum = sumNewCus;
        objTotal.newCusDistribution = Percentage(sumNewCus,sumTotalCus);
        objTotal.totalOrderNum = sumTotalOrderNum;
        objTotal.newOrderNum = sumNewOrderNum;
        objTotal.newOrderDistribution = Percentage(sumNewOrderNum,sumTotalOrderNum);
        objTotal.totalMealNum = sumTotalMealNum;
        objTotal.newMealNum = sumNewMealNum;
        objTotal.newMealDistribution = Percentage(sumNewMealNum,sumTotalMealNum);
        data.push(objTotal);
        
        for ( var i = 0; i < chartData.categories.length; i++) {
            
            var obj = {};
            obj.deptName = chartData.categories[i];
            obj.totalCusNum = chartData.seriesList[i].totalCusNum;
            obj.newCusNum = chartData.seriesList[i].newCusNum;
            obj.newCusDistribution = Percentage(obj.newCusNum,obj.totalCusNum);
            obj.totalOrderNum = chartData.seriesList[i].totalOrderNum;
            obj.newOrderNum = chartData.seriesList[i].newOrderNum;
            obj.newOrderDistribution = Percentage(obj.newOrderNum,obj.totalOrderNum);
            obj.totalMealNum = chartData.seriesList[i].totalMealNum;
            obj.newMealNum = chartData.seriesList[i].newMealNum;
            obj.newMealDistribution = Percentage(obj.newMealNum,obj.totalMealNum);
            data.push(obj);
            
            sumTotalCus = sumTotalCus + chartData.seriesList[i].totalCusNum;
            sumNewCus = sumNewCus + chartData.seriesList[i].newCusNum;
            
            sumTotalOrderNum = sumTotalOrderNum + chartData.seriesList[i].totalOrderNum;
            sumNewOrderNum = sumNewOrderNum + chartData.seriesList[i].newOrderNum;
            
            sumTotalMealNum = sumTotalMealNum + chartData.seriesList[i].totalMealNum;
            sumNewMealNum = sumNewMealNum + chartData.seriesList[i].newMealNum;
        }
        
        data[0].totalCusNum = sumTotalCus;
        data[0].newCusNum = sumNewCus;
        data[0].newCusDistribution = Percentage(sumNewCus,sumTotalCus);
        data[0].totalOrderNum = sumTotalOrderNum;
        data[0].newOrderNum = sumNewOrderNum;
        data[0].newOrderDistribution = Percentage(sumNewOrderNum,sumTotalOrderNum);
        data[0].totalMealNum = sumTotalMealNum;
        data[0].newMealNum = sumNewMealNum;
        data[0].newMealDistribution = Percentage(sumNewMealNum,sumTotalMealNum);
        
        
        PROMOTION_RESULTS_TABLE.reloadPromotionResultsGrid(data);
    }
    
    /**
     * 重新执行查询
     */
     PROMOTION_RESULTS_TABLE.reloadPromotionResultsGrid = function (data){
        
         $("#promotionResultsTable" ).clearGridData();   //清空原grid数据  
        
         $("#promotionResultsTable").jqGrid('setGridParam', {
             datatype : 'local',
             data : data
            }).trigger("reloadGrid");
    };
    
    function Percentage(num, total) {
        if (0 != total) {
            return (Math.round(num / total * 10000) / 100.00 + "%");// 小数点后两位百分比
        } else {
            return '0%'
        }
    }
    
    
    //默认JqGrid参数
    PROMOTION_RESULTS_TABLE.defaultJqGridOptions = {
        mtype : "POST",
        datatype : "json",
        height : "auto",
        cellLayout : 21,
        autowidth : true,
        shrinkToFit : true,
        //pager: "#gridPager",
        rowNum : 15,
        viewrecords: true,
        rowList : [15, 30, 50],
        jsonReader : {
            root : "rows",
            records : "records",
            page : "page",
            total : "total",
            records : "records",
            repeatitems : false,
            id: "ID"
        }
    };
    
    /**
     * 初始化JqGrid
     */
     PROMOTION_RESULTS_TABLE.initGrid = function() {
         PROMOTION_RESULTS_TABLE.initGirdOptions();
         PROMOTION_RESULTS_TABLE.setGridOptions();
        $("#promotionResultsTable").jqGrid(PROMOTION_RESULTS_TABLE.defaultJqGridOptions);
        
         $("#promotionResultsTable").jqGrid('setGroupHeaders', {
                useColSpanStyle : true,
                groupHeaders : [ {
                    startColumnName : 'totalCusNum',
                    numberOfColumns : 3,
                    titleText : '客户统计'
                }, {
                    startColumnName : 'totalOrderNum',
                    numberOfColumns : 6,
                    titleText : '订货统计'
                } ]
            });
    };
    
    /**
     * 初始化JqGird参数
     */
     PROMOTION_RESULTS_TABLE.initGirdOptions = function() {
        PROMOTION_RESULTS_TABLE.defaultJqGridOptions.colNames = [ '部门', '总人数', '新客户人数',
                '新客户占比','总订货量（吨）','新客户订货量（吨）','新客户订货量占比','总订货套餐（个）',
                '新客户订货套餐（个）','新客户订货套餐占比' ];
        PROMOTION_RESULTS_TABLE.defaultJqGridOptions.colModel = [
           {name : 'deptName',index : 'deptName',sortable : false,align : 'center',width : 100},
           {name : 'totalCusNum',index : 'totalCusNum',sortable : false,align : 'center',width : 80},
           {name : 'newCusNum',index : 'newCusNum',sortable : false,align : 'center',width : 80},
           {name : 'newCusDistribution',index : 'newCusDistribution',sortable : false,align : 'center',width : 80},
           {name : 'totalOrderNum',index : 'totalOrderNum',sortable : false,align : 'center',width : 100},
           {name : 'newOrderNum',index : 'newOrderNum',sortable : false,align : 'center',width : 100},
           {name : 'newOrderDistribution',index : 'newOrderDistribution',sortable : false,align : 'center',width : 100},
           {name : 'totalMealNum',index : 'totalMealNum',sortable : false,align : 'center',width : 100},
           {name : 'newMealNum',index : 'newMealNum',sortable : false,align : 'center',width : 110},
           {name : 'newMealDistribution',index : 'newMealDistribution',sortable : false,align : 'center',width : 110}
           ];
    };
    
    /**
     * 设置新的Grid参数
     */
     PROMOTION_RESULTS_TABLE.setGridOptions = function(){
        //grid加载后
            PROMOTION_RESULTS_TABLE.defaultJqGridOptions.loadComplete=function(data){
                renderTrColor(this.id);
                $("#promotionResultsTable").setGridWidth($("#promotionResultsTableContainer").width());
            };
    };
    
    $(function() {
        PROMOTION_RESULTS_TABLE.initGrid();
    });
</script>