5

我想在 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 - 表格的其余部分和其他标签由对“/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 被创建并在屏幕上闪烁一秒钟，然后打印视图表在其 div 中替换它。

实际上，如果有一种很好的方法来构造 jqGrid 而不显示它，我更愿意这样做。如果请求“屏幕视图”，我可以稍后显示 jqGrid。

4

0 回答 0