JqGrid冻结列实现

为什么80%的码农都做不了架构师？>>>   

jqgrid冻结列的实现需要设置参数

1.colModel的行要加上属性： frozen:true

2.加载jqgrid设置属性：shrinkToFit: false  // ture: 按比例初始化列宽度  false: 列宽度使用colModel指定的宽度   ---这里设置为false是当数据为空也能看到冻结效果，可根据实际需求设置

2.加载jqgrid后需要再加上这句：

$("#jq_table") .jqGrid('setFrozenColumns').triggerHandler("jqGridAfterGridComplete");

下边是我做项目过程中抽出来的一个简单的示例，相关的js代码如下：

var jqHeader = ['Item Name','Date','00:00','00:15','00:30','00:45',
'01:00','01:15','01:30','01:45','02:00','02:15','02:30','02:45',
'03:00','03:15','03:30','03:45','04:00','04:15','04:30','04:45',
'05:00','05:15','05:30','05:45','06:00','06:15','06:30','06:45',
'07:00','07:15','07:30','07:45','08:00','08:15','08:30','08:45',
'09:00','09:15','09:30','09:45','10:00','10:15','10:30','10:45',
'11:00','11:15','11:30','11:45','12:00','12:15','12:30','12:45',
'13:00','13:15','13:30','13:45','14:00','14:15','14:30','14:45',
'15:00','15:15','15:30','15:45','16:00','16:15','16:30','16:45',
'17:00','17:15','17:30','17:45','18:00','18:15','18:30','18:45',
'19:00','19:15','19:30','19:45','20:00','20:15','20:30','20:45',
'21:00','21:15','21:30','21:45','22:00','22:15','22:30','22:45',
'23:00','23:15','23:30','23:45'];
var jqModel = new Array();
var jqDateResult = new Array();
var temp = "{}";
jqDateResult.push(eval('(' + temp + ')'));
jqModel.push({name:"item",index:"item",align:"center",width:160,frozen:true});
jqModel.push({name:"date_data",index:"date_data",align:"center",width:100,frozen:true});
for(var p=0; p<96; p++){
	jqModel.push({name:"t"+p,index:"t"+p,align:"center",width:100});
}
$("#jq_table").jqGrid('GridUnload');
$("#jq_table").jqGrid({
    	data : jqDateResult,
    	datatype : "local",
    	colNames: jqHeader, 
    	colModel: jqModel, 
    	rowNum : 5,
        rowList : [5,10,20],
        height:80,
        width:575,
        shrinkToFit: false,
        pager : $("#jq_table_pager"),
        viewrecords : true
}).jqGrid('setFrozenColumns').triggerHandler("jqGridAfterGridComplete");

具体效果图就不贴了，有兴趣试试即可。

转载于:https://my.oschina.net/whome/blog/808349