jqGrid添加动态列

之前使用jqGrid时列都是固定的，但是前几天遇到一个问题，需要根据某个条件动态为jqGrid添加列，在网上搜了一下没有找到具体的解决方法，没办法，只能自力更生。最后做出来的效果是这样的。其中，前5列是固定的，后几列是根据条件的不同，从数据库取的不同字段。

代码是这样的，首先是js代码，因为是动态的列，所以colModel数组写成前5项固定，后几项是通过循环添加进去的：

$(function() { colModelData = [{ label : '作業工程', name : 'process', sortable : false, width : 100, align : "center" },{ label : '作業細目', name : 'detailProcess', sortable : false, width : 100, align : "center" },{ label : '対応職種', name : 'dutyLevel', sortable : false, width : 80, align : "center" }, { label : '作業時間', name : 'cost', sortable : false, width : 80, align : "center" }, { label : '単位', name : 'stdUnit', sortable : false, width : 80, align : "center" } ]; var count = $("#projectLevel option").length; for( a = 0; a < count; a++ ) { var labelName = $("#projectLevel").get(0).options[a].text; var amountCol = { label : labelName, name : 'stdTaskSubList[' + a + '].amount', sortable : false, width : 80, fixed : false, align : "center" }; var seqIdCol = { label : 'No', name : 'stdTaskSubList[' + a + '].seqId', sortable : false, hidden : true, width : 50 }; colModelData.push( amountCol ); colModelData.push( seqIdCol ); } createGrid( colModelData ); }); function createGrid( colModelData ){ $("#stdTaskGridTable").jqGrid( { url : "json/search.action", datatype : "json", height : 330, colModel : colModelData, //sortname : 'accName', //sortorder : 'asc', viewrecords : true, rowNum : $("#hidden_rowNum").val(), rownumbers : true, //rowList : [ 10, 20, 30 ], jsonReader : { root : "dataRows", page : "curPage", total : "totalPages", records : "totalRecords", repeatitems : false }, prmNames : { rows : "page.pageSize", page : "page.curPageNo", sort : "page.orderBy", order : "page.order" }, //pager : "#gridPager", mtype : "POST", //postData : postDataStr, gridComplete : function() { }, onCellSelect : function(rowid, index, contents, event){ } }).navGrid('#gridPager', { edit : false, add : false, del : false, search : false }); }

 

在action中赋给dataRows的列表是这样的List< StdTaskListItem >，其中，StdTaskListItem类的结构如下：

 public class StdTaskListItem { private String processId; private String process; private String detailProcess; private String detailProcessId; private String dutyLevel; private BigDecimal cost; private String stdUnit; private List<StdTaskSubListItem> stdTaskSubList = new ArrayList<StdTaskSubListItem>(); ...... }

StdTaskListItem类的前几个字段对应的jqGrid的固定列，List<StdTaskSubListItem> stdTaskSubList对应的就是动态列，js里通过循环加载stdTaskSubList中的每一项。

for( a = 0; a < count; a++ )
{
 var amountCol = {
  label : labelName,
  name : 'stdTaskSubList[' + a + '].amount',
  sortable : false,
  width : 80,
  fixed : false,
  align : "center"
 };
}

 

StdTaskSubListItem类的结构：

public class StdTaskSubListItem { private String seqId; private String projectLevelId; private String projectLevelName; private BigDecimal amount; ...... }

 

整个过程就是这样，需要注意的是，jqGrid的colModel中每一列的name对应的是赋给dataRows的列表List< StdTaskListItem >中StdTaskListItem类的字段名称，而不是其它什么名称。

不知道整个过程我有没有说清楚，或者是这样做会有什么问题。做完后再重新看一遍感觉不是很麻烦，但其实在做的过程中，是通过反复猜测和实验才成形的，这才是真正乐趣所在。