One idea to view in jqgrid format

I would like to have two views in jqgrid:

1) regular grid view with sortable columns, pagination, etc. (this is great and works great ... love!).

2) "print view", which can be easily created using css and configured for printing. The class structure should not be too complicated because I want to easily create my own stylesheet. One important thing is to be able to repeat the column headings on each printed page. (I don't like printing from jqgrid. Even when I add a jqgrid stylesheet with the value "media = print", the printed results are very difficult to control.)

So, I did the first creation of jqGrid. Then, using its data, create my own table and print it. This is a little hack. But it works.

1- Create a grid and paste it into the div. Note. I called build_print_view in the loadComplete function based on the presence of the variable. This allows me to control whether I want to first display the “print view” or “grid”:

 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 - In build_print_view (), you can extract data from jqgrid and put it in a table, which can be styled as you like using your own style sheets.

    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 - The rest of the table, etc. tags are returned by calling ajax "get" on "/ lookupgrid / lookupgrid / get_print_view", and I just drag and drop tablestr into div "#printresults", i.e.:

    <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 , div.

, jqGrid , . jqGrid , " ".