jqgrid一些特殊用法
jqgrid很多知识可以从 wiki上自学 ：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
1、合并多列名：
效果图：
直接看jqgrid的设置代码吧：
jQuery("#dataGrid").jqGrid({
url:urlStr,
datatype: "json",
<%
String colNames = "";
String[] colModel = new String[colList.size()];
int index = 0;
for(int i = 0; i < colList.size();i++) {
colNames += ",'" + colList.get(i)[0] + "'";
//设置 colModel 的属性，由于二级列名都相同，在colModel中的name应该设置不相同，这样可以避免相同列名的数据在点击排序后都被赋成一样的。
if (colList.get(i)[0].equals("search")) {
colModel[i] = "{name:'" + colList.get(i)[0] + ""+index+"',width: 60,align:'" + colList.get(i)[1] + "'},";
index++;
} else {
colModel[i] = "{name:'" + colList.get(i)[0] + ""+i+"',width: 60,align:'" + colList.get(i)[1] + "'},";
}
if(i == colList.size() && colModel[i].length() > 0) {
colModel[i] = colModel[i].substring(0,colModel[i].length() -1);
}
}
if(colNames.length() > 0) {
colNames = colNames.substring(1);
}
%>
colNames:[<%=colNames%>],
colModel:[
<%
for(int i = 0 ; i < colModel.length; i++) {
%>
<%=colModel[i]%>
<%
}
%>
],
height:280,
rowNum:20, //默认每页记录数
rowList:[10,20,30], //可选择的每页记录数
……
});
jQuery("#dataGrid").jqGrid('destroyGroupHeader');
jQuery("#dataGrid").jqGrid('setGroupHeaders', {
useColSpanStyle: false,
groupHeaders: [
{startColumnName: 'search0', numberOfColumns: 3,titleText: 'qunarHotel'{color}}, //startColumnName：一级列名所属的二级列名开始的第一列（这里
{startColumnName: 'search1', numberOfColumns: 3,titleText: 'qunarChoice'{color}}, 的名字是指colModel中的name属性），numberOfCulumns:指一级
{startColumnName: 'search2', numberOfColumns: 3,titleText: 'qunarChoice_1'{color}}, 列名下面附属的列数，titleText：是指一级列名的名字。
{startColumnName: 'search3', numberOfColumns: 3,titleText: 'qunarChoice_2'}
{startColumnName: 'search4', numberOfColumns: 3, titleText: 'qunarChoice_3'},
{startColumnName: 'search5', numberOfColumns: 3,titleText: 'qunarRank'{color}},
{startColumnName: 'search6', numberOfColumns: 3,titleText: 'qunarRecommand'},
{startColumnName: 'search7', numberOfColumns: 3,titleText: 'qunarCatalog'{color}},
{startColumnName: 'search8', numberOfColumns: 3, titleText: '合计'{color}}
]});
jQuery("#dataGrid").jqGrid('navGrid','#dataPager',{edit:false,add:false,del:false,autowidth:true});
$("#dataGrid").setGridWidth($(window).width()*0.90);
$("#dataGrid").setGridHeight($(window).height()*0.65);
jQuery("#dataGrid").jqGrid('setGridParam',{url:urlStr,datatype: "json"}).trigger('reloadGrid');
}
2、改变列名/列数
列名改变前：
列名改变后：
在改变前的图表中，点击 “静态酒店访问个数” 列下面的红色值，jqgrid即改变成改变后的形式。然后，在改变后的图表中点击 “返回” ，又变成列名改变前的形式。
我们看一下代码：
function search(level, param) {
……
var cellfunc = null;
if(level=='1') { //根据传进来的level的值不同显示不同的列名和列数
colNames = ['酒店seq','酒店名','访问次数','操作'];
colModels = [{name:'酒店seq',align:'center'},{name:'酒店名',align:'center'},{name:'访问次数',align:'center'},{name:'操作',align:'center',classes:'link'}];
cellfunc = function(rowid,iCol,cellcontent,e) { //定义一个方法，该方法处理点击表格中某个值的操作，这里是在列名改变前后的jqgrid进行跳转。
if(iCol == 3) {
search(0,'');
}
}
{color:#ff0000}} else {{color}
colNames = ['城市','静态酒店访问个数','静态酒店访问次数'];
colModels = [{name:'城市',align:'center'},{name:'静态酒店访问个数',align:'center',classes:'link'},{name:'静态酒店访问次数',align:'center'}];
cellfunc = function(rowid,iCol,cellcontent,e) {
if(iCol == 1) {
param=jQuery("#dataGrid").getCell(rowid,0); //取得的 rowid 行 第一列的值。
search(1,param);
}
}
}
var urlStr = '<%=jspName%>?startDate='startDate'&endDate='endDate'&level='level'¶m='encodeURI(param)'&action=query';
jQuery("#dataGrid").GridUnload(); //将jqgrid卸载，下面重新加载
jQuery("#dataGrid").jqGrid({
url:urlStr,
datatype: "json",
colNames:colNames,
colModel:colModels,
height:280,
rowNum:20, //默认每页记录数
rowList:[10,20,30], //可选择的每页记录数
pager: '#dataPager',
sortname: 'id',
emptyrecords: "暂无数据",
viewrecords: true,
sortorder: "desc", //降序排序
loadonce: true, //一次加载
onCellSelect:cellfunc, //配置cell点击的方法。
caption: "<%=title%>"
});
jQuery("#dataGrid").jqGrid('navGrid','#dataPager',{edit:false,add:false,del:false,autowidth:true});
$("#dataGrid").setGridWidth($(window).width()*0.90);
$("#dataGrid").setGridHeight($(window).height()*0.65);
jQuery("#dataGrid").jqGrid('setGridParam',{url:urlStr,datatype: "json"}).trigger('reloadGrid');
}