jqGrid冻结列
jqgrid冻结列
冻结列:就是横向移动表格时,让某一列保持不动
做法:
1.colModel的行要加上属性: frozen:true。注意:冻结列必须从第一列开始,包括隐藏列
2.加载jqgrid后需要再加上这句:$("#jq_table") .jqGrid('setFrozenColumns')
3.也可以加上shrinkToFit: false 属性 // ture: 按比例初始化列宽度 false: 列宽度使用colModel指定的宽度 ---这里设置为false是当数据为空也能看到冻结效果,可根据实际需求设置
1 function gridList() { 2 var $gridList = $("#gridList"); 3 $gridList.dataGrid({ 4 url: "/POM/Order/GetModels?plandate=" + $("#txt_plandate").val(), 5 height: $(window).height() - 128, 6 colModel: [ 7 { label: '主键', name: 'Id', hidden: true, frozen: true },//这里 8 { label: '订单号', name: 'OrderCode', width: 130, align: 'left', frozen: true },//这里 9 { 10 label: '计划日', name: 'PlanDate', width: 80, align: 'left', 11 formatter: function (cellvalue) { 12 var oldTime = (new Date(cellvalue)).getTime(); 13 var curTime = new Date(oldTime).format("yyyy-MM-dd"); 14 return curTime; 15 }, frozen: true 16 },//这里 17 { label: '产品编号', name: 'MaterielNo', width: 70, align: 'left' }, 18 { label: '产品名称', name: 'MaterielName', width: 70, align: 'left' }, 19 { label: '产品型号', name: 'MaterielModel', width: 70, align: 'left' }, 20 { label: '工艺', name: 'PPRName', width: 60, align: 'left' }, 21 { label: '工艺', name: 'PPRCode', hidden: true }, 22 { label: '生产线', name: 'CellName', width: 70, align: 'left' }, 23 { label: '生产线', name: 'CellCode', hidden: true }, 24 { label: '状态', name: 'StatusNameCN', width: 60, align: 'left' }, 25 { label: '状态', name: 'Status', hidden: true }, 26 { label: '类型', name: 'TypeNameCN', width: 60, align: 'left' }, 27 { label: '类型', name: 'Type', hidden: true }, 28 { label: '数量', name: 'Amount', width: 60, align: 'left' }, 29 { label: '完成数量', name: 'FinishAmount', width: 60, align: 'left' }, 30 { label: '单位', name: 'Uom', width: 60, align: 'left' }, 31 { label: '前缀', name: 'Column_1', width: 100, align: 'left' }, 32 { label: '号段开始', name: 'NumberSegmentStart', width: 60, align: 'left' }, 33 { label: '排序号', name: 'OrderIndex', width: 60, align: 'left' }, 36 { label: '实际开始时间', name: 'ActualStartTime', width: 80, align: 'left'}, 44 { label: '实际结束时间', name: 'ActualEndTime', width: 80, align: 'left'}, 52 { label: '备注', name: 'Memo', width: 80, align: 'left' } 53 ], 54 pager: "#gridPager", 55 sortname: 'CreationTime desc', 56 viewrecords: true, 57 184 }); 185 jQuery("#gridList").jqGrid('setFrozenColumns');//这里 186 $("#btn_search").click(function () { 187 $gridList.jqGrid('setGridParam', { 188 url:"/POM/Order/GetModels", 189 postData: { plandate: $("#txt_plandate").val(),plandate2: $("#txt_plandate2").val() ,materielno: $("#txt_materielno").val(), type: $("#txt_type").val(), status: $("#txt_status").val() } 190 }).trigger('reloadGrid'); 191 }); 193 }