提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

74jqGrid - 冻结带有分组头的列

分组 带有 冻结
2023-09-11 14:15:41 时间

这个例子展示了新的冻结列功能。尝试去滚动水平的滚动条。
如我们看到了分组表头和行号都是支持的。需要注意的是支持分组表头只是在useColSpanStyle设置为false的时候。
在这里插入图片描述

HTML代码举例

  <head>
    <title>jqGrid 实例</title>
  </head>
  <body>
    ···代码省略···
    <table id="gfrc2"></table> 
    <div id="pgfrc2"></div>
    ···代码省略···
  </body>
</html>

javascript代码举例

$(function(){
  pageInit();
});
function pageInit(){
  jQuery("#gfrc2").jqGrid({
       url:ctx+'/JSONNameData',
    datatype: "json",  
     colNames: ['InvNo', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
     colModel: [
           {name: 'id', index: 'id', width: 60, align: 'center', sorttype: 'date', frozen : true},
           {name: 'name', index: 'name', width: 100, frozen : true },
           {name: 'amount', index: 'amount', width: 95, formatter: 'number', sorttype: 'number', align: 'right'},
           {name: 'tax', index: 'tax', width: 95, formatter: 'number', sorttype: 'number', align: 'right'},
           {name: 'total', index: 'total', width: 95, formatter: 'number', sorttype: 'number', align: 'right'},
           {name: 'closed', index: 'closed', width: 95, align: 'center', formatter: 'checkbox',
              edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
           {name: 'ship_via', index: 'ship_via', width: 120, align: 'center', formatter: 'select',
              edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
           {name: 'note', index: 'note', width: 150, sortable: false}
      ],
       rowNum:10,
      width:700,
       rowList:[10,20,30],
       pager: '#pgfrc2',
       sortname: 'invdate',
      viewrecords: true,
      sortorder: "desc",
    jsonReader: {
      repeatitems : false
    },
    shrinkToFit: false,
    rownumbers: true,
    caption: "Frozen Column with Group header",
    height: 'auto'
  });
  jQuery("#gfrc2").jqGrid('setGroupHeaders', {
    useColSpanStyle: false, 
    groupHeaders:[
    {startColumnName: 'id', numberOfColumns: 2, titleText: 'Client Details'}
    ]  
  });
  jQuery("#gfrc2").jqGrid('setFrozenColumns');

}

java servlet代码举例

$(function(){
  pageInit();
});
function pageInit(){
  jQuery("#gfrc2").jqGrid({
       url:ctx+'/JSONNameData',
    datatype: "json",  
     colNames: ['InvNo', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
     colModel: [
           {name: 'id', index: 'id', width: 60, align: 'center', sorttype: 'date', frozen : true},
           {name: 'name', index: 'name', width: 100, frozen : true },
           {name: 'amount', index: 'amount', width: 95, formatter: 'number', sorttype: 'number', align: 'right'},
           {name: 'tax', index: 'tax', width: 95, formatter: 'number', sorttype: 'number', align: 'right'},
           {name: 'total', index: 'total', width: 95, formatter: 'number', sorttype: 'number', align: 'right'},
           {name: 'closed', index: 'closed', width: 95, align: 'center', formatter: 'checkbox',
              edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
           {name: 'ship_via', index: 'ship_via', width: 120, align: 'center', formatter: 'select',
              edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
           {name: 'note', index: 'note', width: 150, sortable: false}
      ],
       rowNum:10,
      width:700,
       rowList:[10,20,30],
       pager: '#pgfrc2',
       sortname: 'invdate',
      viewrecords: true,
      sortorder: "desc",
    jsonReader: {
      repeatitems : false
    },
    shrinkToFit: false,
    rownumbers: true,
    caption: "Frozen Column with Group header",
    height: 'auto'
  });
  jQuery("#gfrc2").jqGrid('setGroupHeaders', {
    useColSpanStyle: false, 
    groupHeaders:[
    {startColumnName: 'id', numberOfColumns: 2, titleText: 'Client Details'}
    ]  
  });
  jQuery("#gfrc2").jqGrid('setFrozenColumns');

}

相关文章