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;
}