jqgrid打印视图的一个想法

Question

我想在jqgrid中有两个视图:

1)带有可排列列,分页等的常规网格视图(这很棒,效果很好......喜欢它!).

2)"打印视图",可以使用css轻松设置样式并为打印定制.类结构不应该太复杂,因为我想轻松制作自己的样式表.一个重要的事情是能够在每个打印页面上重复列标题.(我不喜欢从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 - 表的其余部分和etc标签由ajax"get"调用"/ lookupgrid/lookupgrid/get_print_view"返回,我只是将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将被创建并在屏幕上闪烁一秒钟,然后打印视图表将其替换为div.

实际上,如果有一个很好的方法来构建jqGrid而不显示它,我宁愿这样做.如果请求"屏幕视图",我可以稍后显示jqGrid.