jqGrid动态列配置与多条件存储过程调用-优快云博客

最近公司的项目中使用到jqGrid控件，官方演示程序中grid的列都是固定的。

<script id="defined grid" type="text/javascript">
    sProgID = "VDQ009"   
    var grdMast = clone(oMagicGrid);
    grdMast.GridID = 'grid1';
    grdMast.width = 980;
    grdMast.height = 300;
    grdMast.Fun = 'Mast';
    grdMast.pager = 'grid1Pager';
    grdMast.btnadd = false;
    grdMast.sortable = true;
    grdMast.loadonce = true;

    grdMast.colNames = ['操作', '期別', '廠商編號', '廠商簡稱', '評分類別代碼','可改變的列...','得分'];
    grdMast.colModel = [{ name: 'acts', width: 45, fixed: true, sortable: false, resize: false },
                        { name: 'AccPeriod', index: 'AccPeriod', width: 60 },
                        { name: 'VendorID', index: 'VendorID', width: 80 },
                        { name: 'AbbrName', index: 'AbbrName', width: 100 },
                        { name: 'ScoreType', index: 'ScoreType', width: 80 },
                        { name: 'changingColumn', index: 'changingColumn', width: 80 },
                        { name: 'Score', index: 'Score', width: 80 }
                       ];
    grdMast.FrmQuery = 'frmQuery';
    grdMast.hideCol = ['acts'];
</script>

项目中使用了jqGrid列表控件，碰到“通过选择不同的日期段，出现该日期段中每一天的统计数据”这样的需求。因为之前对这个列表控件不是很熟悉，网上的资料显示和列相关的两个属性：colName、colModel都是不可更改的。

所以这个办法行不通，也就退而求其次，想通过重新加载的方法，为这两个列重新设置值。但是，这仍然没有成功。中文社区中，也没有很有效的解决方案。后来同事在英文社区，给找到了相应的解决方案。在重新加载之前，得先调用——gridunload 这样一个方法。然后重新为colName和colModel设置属性值，重新加载就可以动态改变列了。

也就是说，通常情况下你得为此准备两个方法：firstLoad()、reLoad().两个方法中都需要定义形如： $("#list4″).jqGrid({});的加载方法。在reload方法中，你首先调用$("#list4″).GridUnload();就可以动态改变列了。

当然，我觉得作为一个很常用且普遍的需求，jqGrid应该内置到API中，而不是采用这样不直观的方法。

项目中有一个功能是：根据不同的筛选条件，调用同一个存储过程，但存储过程返回的结果的列数是不同的，可能有少到6列，多到20列的字段呈现。
这样jqGrid固定列的模式就满足不了需求。而jqGrid的colNames、colModel都是不可更改的。

这里通过重新加载grid 的办法，对colNames、colModel重新赋值，就可以实现动态列的显示了。

关键在于重新加载grid之前，需要调用 GridUnload() 这样一个方法，下面给出部分代码片段：

jQuery("#grid1").GridUnload(); //destroy the grid.see this website:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
        switch (sType) {
            case "VDQ02020":
                grdMast.colNames = ['操作', '期別', '廠商編號', '廠商簡稱', '評分類別代碼', '001', '002', '003', '004', '分數'];
                grdMast.colModel = [{ name: 'acts', width: 45, fixed: true, sortable: false, resize: false },
                                    { name: 'AccPeriod', index: 'AccPeriod', width: 60 },
                                    { name: 'VendorID', index: 'VendorID', width: 80 },
                                    { name: 'AbbrName', index: 'AbbrName', width: 100 },
                                    { name: 'ScoreType', index: 'ScoreType', width: 80 },
                                    { name: 'A', index: 'A', width: 80 },
                                    { name: 'B', index: 'B', width: 80 },
                                    { name: 'C', index: 'C', width: 80 },
                                    { name: 'D', index: 'D', width: 80 },
                                    { name: 'END', index: 'END', width: 80 }
                                   ];
                break;
            case "VDQ02021":
                grdMast.colNames = ['操作', '期別', '廠商編號', '廠商簡稱', '評分類別代碼', '交期得分'];
                grdMast.colModel = [{ name: 'acts', width: 45, fixed: true, sortable: false, resize: false },
                                    { name: 'AccPeriod', index: 'AccPeriod', width: 60 },
                                    { name: 'VendorID', index: 'VendorID', width: 80 },
                                    { name: 'AbbrName', index: 'AbbrName', width: 100 },
                                    { name: 'ScoreType', index: 'ScoreType', width: 80 },
                                    { name: 'DUEScore', index: 'DUEScore', width: 80 }
                                   ];
                break;

jqgrid 动态列