jqgridで2つのビューが必要です。
1）並べ替え可能な列、ページネーションなどを備えた通常のグリッドビュー（これは素晴らしく、非常にうまく機能します...大好きです！）。
2）cssで簡単にスタイルを設定し、印刷用にカスタマイズできる「印刷ビュー」。自分のスタイルシートを簡単に作成したいので、クラス構造はそれほど複雑であってはなりません。重要なことの1つは、印刷された各ページで列ヘッダーを繰り返すことができることです。（jqgridから印刷するのは好きではありません。「media = print」を指定してjqgridスタイルシートを追加しても、印刷結果を制御するのは非常に困難です。）
それで、私がしたことは、最初にjqGridを作成することでした。次に、そのデータを使用して、独自のテーブルを作成し、そこから印刷します。それはちょっとしたハックです。しかし、それは機能します。
1-グリッドを作成し、divに挿入します。変数の存在に基づいて、「loadComplete」関数で「build_print_view」を呼び出したことに注意してください。これにより、最初に「印刷ビュー」と「グリッドビュー」のどちらを表示するかを制御できます。
function classGrid(select_val, showgrid){
jQuery.get('/lookupgrid/lookupgrid/get_grid', function(data) {
var _html= jQuery(data);
jQuery('#resultdiv').html(_html);
var gridtable = jQuery("#list");
var formdata = new Array();
formdata.push({
name: "var1",
value: "whatever"
});
formdata.push({
name: "var2",
value: "whateverelse"
});
var lastsel;
console_log("in classGrid");
gridtable.jqGrid({
url:'/lookupgrid/lookupgrid/class_grid',
colNames:['var1','var2'],
colModel :[
{
name:'var1',
index:'var1',
width:95
},
{
name:'var2',
index:'var2',
width:95
}],
datatype: 'json',
mtype: 'POST',
pager: '#pager',
rowList:[10,20,30],
loadComplete: function() {
if(!showgrid){
build_print_view();
}
},
onSelectRow: function(id){
var rowdata = gridtable.jqGrid('getRowData',id);
alert('Selected row ID ' + id + " var1 is " + rowdata.var1);
},
loadonce: true,
postData:formdata,
width: 800,
height: 300,
pgtext:"Page {0}",
viewrecords: true,
gridview: true,
caption: 'Class Results'
});
gridtable.jqGrid('navGrid','#pager',{
edit:false,
add:false,
del:false
});
});
}
2-build_print_view（）では、jqgridからデータを抽出してテーブルに配置できます。このテーブルは、独自のスタイルシートを使用して好きなようにスタイルを設定できます。
function build_print_view(){
var gridtable = jQuery("#list");
var lista = gridtable.jqGrid('getGridParam','data');
var tablestr = "";
for(var i=0;i<lista.length;i++){
var rowData = lista[i];
tablestr += "<tr>"
tablestr += "<td class=\"wide cycle\" style=\"width:50px;\" id=\"sku\">"+rowData.var1+"</td>";
tablestr += "<td class=\"wide cycle\" style=\"width:300px;\" id=\"skudesc\">"+rowData.var2+"</td>";
tablestr += "</tr>";
}
jQuery.get('/lookupgrid/lookupgrid/get_print_view', function(data) {
var _html= jQuery(data);
_html.find('#printresults').append(tablestr);
jQuery('#resultdiv').html(_html);
});
}
3-テーブルの残りの部分などのタグは、「/ lookupgrid / lookupgrid / get_print_view」へのajax「get」呼び出しによって返され、tablestrを「#printresults」divに挿入します。
<div id="printview">
<table id="clsitems" class="wide">
<thead>
<tr>
<th colspan="10" class="wide" id="label">
</th>
</tr>
<tr>
<td class="wide label">
var1:
</td>
<td class="wide label">
var2:
</td>
</tr>
</thead>
<tbody id="printresults">
</tbody>
</table>
</div>
4-唯一の奇妙な点は、「印刷ビュー」が要求された場合、jqGridが作成されて画面上で1秒間点滅し、次に印刷ビューテーブルがそのdivでそれを置き換えることです。
実際、jqGridを表示せずに構築する良い方法があれば、それをお勧めします。その後、「画面表示」が要求された場合は、jqGridを表示できます。