jqGrid动态添加列

 $.jgrid.gridUnload("gridList");//核心的代码！先卸载表格！官网提供的接口调用会出现未找到方法的错误、后来查阅了源码发现该方法
 $("#gridList").dataGrid({
      url: "/DataManage/WaterReserReport/GetGridJson"
      , postData:
      {
           stations: $("#sel_station").selectpicker("val")
       , time: $("#time").val()
      }
      , height: $(window).height() - 185
      , colModel: getCols()
      , pager: "#gridPager"
      , sortname: '站点编号,时间'
      , sortorder: 'desc'
      , viewrecords: true
      , loadComplete: function (data) {
           wfr.resizeWindow();
      }
 });

....省略部分代码
function getCols() {
　　var cols = [];
　　var sels = $("#sel_station").find("option:selected");
　　if (sels == null && sels.length == 0) {
　　　　$.modalAlert("请选择站点！");
　　　　return [];
　　}
　　startColName = $(sels[0]).val();
　　mergeCol = sels.length;　　for (var i = 0; i < sels.length; i++) {
　　　　var opt = sels[i];
　　　　cols.push({ label: $(opt).text(), name: $(opt).val(), align: 'center' });
　　}
　　cols.push({ label: '自定义列', name: "cus", align: 'center' });//如果需要添加额外的列可以这样加
　　return cols;
}

前端主要涉及到的标签代码：

<div class="gridPanel">
    <table id="gridList"></table>
    <div id="gridPager"></div>
</div>

 

js完整代码：

/// <reference path="../../jquery/jquery-2.1.1.min.js" />
/// <reference path="../../jqgrid/jqgrid.min.js" />
/// <reference path="../../jquery/xdate.js" />

$(function () {
    var startColName = "", mergeCol = 0;
    var hzhStation = [
        { label: '月份', name: "月份", align: 'center', sortable: false }
        , { label: '二河闸', name: '二河闸', align: 'center', sortable: false }
        , { label: '三河闸', name: '三河闸', align: 'center', sortable: false }
        , { label: '高良涧', name: '高良涧', align: 'center', sortable: false }
        , { label: '高良涧电站', name: '高良涧电站', align: 'center', sortable: false }
        , { label: '水量(亿m³)', name: "水量", align: 'center', sortable: false }];
    var lmhStation = [
        { label: '月份', name: "月份", align: 'center', sortable: false }
        , { label: '杨河滩闸', name: '杨河滩闸', align: 'center', sortable: false }
        , { label: '皂河闸', name: '皂河闸', align: 'center', sortable: false }
        , { label: '嶂山闸', name: '嶂山闸', align: 'center', sortable: false }
        , { label: '水量(亿m³)', name: "水量", align: 'center', sortable: false }];
    var sjhStation = [
        { label: '月份', name: "月份", align: 'center', sortable: false }
        , { label: '二级坝闸', name: '二级坝闸', align: 'center', sortable: false }
        , { label: '二闸', name: '二闸', align: 'center', sortable: false }
        , { label: '三闸', name: '三闸', align: 'center', sortable: false }
        , { label: '四闸', name: '四闸', align: 'center', sortable: false }
        , { label: '水量(亿m³)', name: "水量", align: 'center', sortable: false }];
    var xjhStation = [
        { label: '月份', name: "月份", align: 'center', sortable: false }
        , { label: '韩庄闸', name: '韩庄闸', align: 'center', sortable: false }
        , { label: '伊家河闸', name: '伊家河闸', align: 'center', sortable: false }
        , { label: '蔺家坝闸', name: '蔺家坝闸', align: 'center', sortable: false }
        , { label: '老运河闸', name: '老运河闸', align: 'center', sortable: false }
        , { label: '水量(亿m³)', name: "水量", align: 'center', sortable: false }];
    var wfr = {
        //初始化方法
        init: function () {
            wfr.bindInit();//绑定初始化
            wfr.bindStation();//绑定站点列表
            wfr.bindEvent();//绑定事件
        }
        , resultData: null
        , bindInit: function () {
            try {
                $('#sel_station').selectpicker({
                    noneSelectedText: '请选择要查询的湖站',
                    noneResultsText: '未匹配到湖站'
                });
                var dateNow = new XDate();
                $("#time").val(dateNow.toString("yyyy年"));
            } catch (e) {
                console.log(e);
                $.modalAlert("初始化失败！");
            }
        }
        //绑定事件
        , bindEvent: function () {
            $("#btn_search").click(function () {
                try {
                    wfr.bindGridData();
                } catch (e) {
                    console.log(e);
                    $.modalAlert("查询失败！");
                }
            });
            $("#btn_export").click(function () {
                try {
                    $.ajax({
                        type: "POST",
                        url: "/DataManage/WaterStatistic/ExportTable",
                        async: true,
                        data: {
                            time: $("#time").val()
                            , title: wfr.getTitle()
                            , json: JSON.stringify(resultData.rows)
                            , r: Math.random()
                        },
                        success: function (data) {
                            if (data != null && data != "") {
                                wfr.download(data);
                            }
                        },
                        error: function () {
                            $.modalAlert("导出数据失败！");
                        },
                        complete: function () {
                        }
                    });
                } catch (e) {
                    $.modalAlert("导出报表失败！");
                }
            });
            $(window).bind("resize", function () {
                wfr.resizeWindow();
            });
        }
        , getTitle: function () {
            var sels = $("#sel_station").find("option:selected");
            if (sels == null && sels.length == 0) {
                $.modalAlert("请选择站点！");
                return [];
            }
            var station = $(sels[0]).text();
            var year = $("#time").val();
            var title = "{0}全年{1}出湖水量计算表".format(year, station);
            return title;
        }
        //获取动态列
        , getCols: function () {

            var sels = $("#sel_station").find("option:selected");
            if (sels == null && sels.length == 0) {
                $.modalAlert("请选择站点！");
                return [];
            }

            var selType = $(sels[0]).val();
            switch (selType) {
                case "HZH":
                    startColName = "二河闸";
                    mergeCol = 4;
                    return hzhStation;
                case "LMH":
                    startColName = "杨河滩闸";
                    mergeCol = 3;
                    return lmhStation;
                case "SJH":
                    startColName = "二级坝闸";
                    mergeCol = 4;
                    return sjhStation;
                case "XJH":
                    startColName = "韩庄闸";
                    mergeCol = 4;
                    return xjhStation;
            }
            return [];
            //动态获取站点可用
            //var cols = [];
            //mergeCol = sels.length;
            //cols.push({ label: '月份', name: "Month", align: 'center' });
            //startColName = $(sels[0]).val();
            //for (var i = 0; i < sels.length; i++) {
            //    var opt = sels[i];
            //    cols.push({ label: $(opt).text(), name: $(opt).val(), align: 'center' });
            //}
            //cols.push({ label: '水量(亿m³)', name: "Water", align: 'center' });
            //return cols;
        }
        //绑定站点数据
        , bindStation: function () {
            try {
                $('#sel_station').empty();
                var option = "<option value='{0}'>{1}</option>".format("HZH", "洪泽湖");
                option += "<option value='{0}'>{1}</option>".format("LMH", "骆马湖");
                option += "<option value='{0}'>{1}</option>".format("SJH", "上级湖");
                option += "<option value='{0}'>{1}</option>".format("XJH", "下级湖");
                $("#sel_station").append(option);
                $('#sel_station').selectpicker('refresh');
                wfr.bindGridData();//绑定表格数据
            } catch (e) {
                console.log(e);
                $.modalAlert("查询站点请求失败！");
            }
        }
        //动态绑定表格数据
        , bindGridData: function () {
            try {
                $.jgrid.gridUnload("gridList");//先卸载表格
                $("#gridList").dataGrid({
                    url: "/DataManage/WaterStatistic/GetGridJson"
                 , postData:
                {
                    stations: $("#sel_station").selectpicker("val")
                , time: $("#time").val()
                }
                , height: $(window).height() - 185
                , colModel: wfr.getCols()
                //, pager: "#gridPager"
                , viewrecords: true

                , loadComplete: function (data) {
                    resultData = data;
                    wfr.resizeWindow();
                }
                });

            } catch (e) {
                console.log(e);
                $.modalAlert("绑定表格失败！");
            }
        }
         , download: function (filename) {
             if (filename == "") {
                 $.modalAlert("没有可以导出的数据！");
                 return false;
             }
             var url = "/Helper/WebDownload.aspx?filename=" + filename + "&r=" + Math.random();
             window.open(url);
         }
        //窗体大小改变事件
        , resizeWindow: function () {
            $("#gridList").setGridWidth($(window).width(), true);
            $("#gridList").setGridHeight($(window).height() - 185);
            jQuery("#gridList").jqGrid('destroyGroupHeader');//最关键的一步、销毁合并表头分组、防止出现表头重叠
            jQuery("#gridList").jqGrid('setGroupHeaders', {
                useColSpanStyle: true,
                groupHeaders: [{ startColumnName: startColName, numberOfColumns: mergeCol, titleText: '月均流量（m³/s）' }]
            });
            $(".ui-jqgrid-bdiv").css("width", "100%");
        }
    }
    wfr.init();


});
/*
*数据格式化
*/
function fdata(v, repleaceNull) {
    if (v == undefined || v == null || $.trim(v.toString()) == "") {
        if (repleaceNull != undefined) {
            return repleaceNull;
        }
        return "";
    }
    else {
        return v.toString();
    }
}
function cellFormatter(cellvalue, options, rowObject) {
    return cellvalue == null ? "-" : cellvalue;
}