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>

问题

项目中有一个功能是：根据不同的筛选条件，调用同一个存储过程，但存储过程返回的结果的列数是不同的，可能有少到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;

然后再对grid进行加载，就可以实现项目的功能要求了。

希望本文对你有帮助。