这个例子展示了新的冻结列功能。尝试去滚动水平的滚动条。
如我们看到了分组表头和行号都是支持的。需要注意的是支持分组表头只是在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'); }
