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     }

 

posted @ 2017-08-25 16:19  单纯的桃子  阅读(3990)  评论(0编辑  收藏  举报