jqgrid 动态列

来源：互联网发布：酷播插件苹果cms教程编辑：程序博客网时间：2024/05/29 17:08

最近公司的项目中使用到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;

0 0