5

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を表示できます。

4

0 に答える 0