zoukankan      html  css  js  c++  java
  • 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;
    }
    
    
    
     
  • 相关阅读:
    龙东平:持续提升个人认知的三大底层逻辑
    【科创人独家】美信拓扑创始人一乐:如何登山不是最重要的问题,山峰才是
    【科创人独家】搜狐快站金庸:有情有义,90后技术创业者的问剑之路
    【科创人独家】军哥手记程军:我的2020,先打个60分吧
    【科创人独家】云风:从创业到招安,自由的游戏玩家+务实的程序员
    C语言--->指针
    位运算(一)
    平方根倒数快速算法
    IntelliJ IDEA 配置《算法》(第四版)
    深度学习(一):Python神经网络——手写数字识别
  • 原文地址:https://www.cnblogs.com/it-lhc/p/7111423.html
Copyright © 2011-2022 走看看