easyui实现datagrid打印

最简单的方法：

[javascript] view plain copy

print ?

1. <input type ='button' value='打印' οnclick='javascript:window.print()' />  

<input type ='button' value='打印' οnclick='javascript:window.print()' />

调用WebBrowser 控件实现打印，但是会出现“浏览器已经阻止此站点用不安全方式使用ActiveX控件”的问题，可以参考如下这篇文章来解决：点击打开链接

[html] view plain copy

print ?

1. <object id="wb" classid="ClSID:8856F961-340A-11D0-A96B-00C04Fd705A2" width="0" height="0"></object>　　  
2.         <input type ='button' value='打印' onclick='javascript:wb.ExecWB(6,1)'/>  
3.         <input type ='button' value='打印预览' onclick='javascript:wb.ExecWB(7,1)'/>  
4.         <input type ='button' value='页面设置' onclick='javascript:wb.ExecWB(8,1)'/>  

<object id="wb" classid="ClSID:8856F961-340A-11D0-A96B-00C04Fd705A2" width="0" height="0"></object>　　
        <input type ='button' value='打印' οnclick='javascript:wb.ExecWB(6,1)'/>
        <input type ='button' value='打印预览' οnclick='javascript:wb.ExecWB(7,1)'/>
        <input type ='button' value='页面设置' οnclick='javascript:wb.ExecWB(8,1)'/>

网上找的模板：

print.js文件

[javascript] view plain copy

print ?

1. // strPrintName 打印任务名  
2. // printDatagrid 要打印的datagrid  
3. function CreateFormPage(strPrintName, printDatagrid) {  
4.     var tableString = '<table cellspacing="0" class="pb">';  
5.     var frozenColumns = printDatagrid.datagrid("options").frozenColumns;  // 得到frozenColumns对象  
6.     var columns = printDatagrid.datagrid("options").columns;    // 得到columns对象  
7.     var nameList = '';  
8.     // 载入title  
9.     if (typeof columns != 'undefined' && columns != '') {  
10.         $(columns).each(function (index) {  
11.             tableString += '\n<tr>';  
12.             if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') {  
13.                 for (var i = 0; i < frozenColumns[index].length; ++i) {  
14.                     if (!frozenColumns[index][i].hidden) {  
15.                         tableString += '\n<th width="' + frozenColumns[index][i].width + '"';  
16.                         if (typeof frozenColumns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) {  
17.                             tableString += ' rowspan="' + frozenColumns[index][i].rowspan + '"';  
18.                         }  
19.                         if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) {  
20.                             tableString += ' colspan="' + frozenColumns[index][i].colspan + '"';  
21.                         }  
22.                         if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') {  
23.                             nameList += ',{"f":"' + frozenColumns[index][i].field + '", "a":"' + frozenColumns[index][i].align + '"}';  
24.                         }  
25.                         tableString += '>' + frozenColumns[0][i].title + '</th>';  
26.                     }  
27.                 }  
28.             }  
29.             for (var i = 0; i < columns[index].length; ++i) {  
30.                 if (!columns[index][i].hidden) {  
31.                     tableString += '\n<th width="' + columns[index][i].width + '"';  
32.                     if (typeof columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) {  
33.                         tableString += ' rowspan="' + columns[index][i].rowspan + '"';  
34.                     }  
35.                     if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) {  
36.                         tableString += ' colspan="' + columns[index][i].colspan + '"';  
37.                     }  
38.                     if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') {  
39.                         nameList += ',{"f":"' + columns[index][i].field + '", "a":"' + columns[index][i].align + '"}';  
40.                     }  
41.                     tableString += '>' + columns[index][i].title + '</th>';  
42.                 }  
43.             }  
44.             tableString += '\n</tr>';  
45.         });  
46.     }  
47.     // 载入内容  
48.     var rows = printDatagrid.datagrid("getRows"); // 这段代码是获取当前页的所有行  
49.     var nl = eval('([' + nameList.substring(1) + '])');  
50.     for (var i = 0; i < rows.length; ++i) {  
51.         tableString += '\n<tr>';  
52.         $(nl).each(function (j) {  
53.             var e = nl[j].f.lastIndexOf('_0');  
54.   
55.             tableString += '\n<td';  
56.             if (nl[j].a != 'undefined' && nl[j].a != '') {  
57.                 tableString += ' style="text-align:' + nl[j].a + ';"';  
58.             }  
59.             tableString += '>';  
60.             if (e + 2 == nl[j].f.length) {  
61.                 tableString += rows[i][nl[j].f.substring(0, e)];  
62.             }  
63.             else  
64.                 tableString += rows[i][nl[j].f];  
65.             tableString += '</td>';  
66.         });  
67.         tableString += '\n</tr>';  
68.     }  
69.     tableString += '\n</table>';  
70.     window.showModalDialog("../print.html", tableString,"location:No;status:No;help:No;dialogWidth:800px;dialogHeight:600px;scroll:auto;");  
71. }  

// strPrintName 打印任务名
// printDatagrid 要打印的datagrid
function CreateFormPage(strPrintName, printDatagrid) {
    var tableString = '<table cellspacing="0" class="pb">';
    var frozenColumns = printDatagrid.datagrid("options").frozenColumns;  // 得到frozenColumns对象
    var columns = printDatagrid.datagrid("options").columns;    // 得到columns对象
    var nameList = '';
    // 载入title
    if (typeof columns != 'undefined' && columns != '') {
        $(columns).each(function (index) {
            tableString += '\n<tr>';
            if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') {
                for (var i = 0; i < frozenColumns[index].length; ++i) {
                    if (!frozenColumns[index][i].hidden) {
                        tableString += '\n<th width="' + frozenColumns[index][i].width + '"';
                        if (typeof frozenColumns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) {
                            tableString += ' rowspan="' + frozenColumns[index][i].rowspan + '"';
                        }
                        if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) {
                            tableString += ' colspan="' + frozenColumns[index][i].colspan + '"';
                        }
                        if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') {
                            nameList += ',{"f":"' + frozenColumns[index][i].field + '", "a":"' + frozenColumns[index][i].align + '"}';
                        }
                        tableString += '>' + frozenColumns[0][i].title + '</th>';
                    }
                }
            }
            for (var i = 0; i < columns[index].length; ++i) {
                if (!columns[index][i].hidden) {
                    tableString += '\n<th width="' + columns[index][i].width + '"';
                    if (typeof columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) {
                        tableString += ' rowspan="' + columns[index][i].rowspan + '"';
                    }
                    if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) {
                        tableString += ' colspan="' + columns[index][i].colspan + '"';
                    }
                    if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') {
                        nameList += ',{"f":"' + columns[index][i].field + '", "a":"' + columns[index][i].align + '"}';
                    }
                    tableString += '>' + columns[index][i].title + '</th>';
                }
            }
            tableString += '\n</tr>';
        });
    }
    // 载入内容
    var rows = printDatagrid.datagrid("getRows"); // 这段代码是获取当前页的所有行
    var nl = eval('([' + nameList.substring(1) + '])');
    for (var i = 0; i < rows.length; ++i) {
        tableString += '\n<tr>';
        $(nl).each(function (j) {
            var e = nl[j].f.lastIndexOf('_0');

            tableString += '\n<td';
            if (nl[j].a != 'undefined' && nl[j].a != '') {
                tableString += ' style="text-align:' + nl[j].a + ';"';
            }
            tableString += '>';
            if (e + 2 == nl[j].f.length) {
                tableString += rows[i][nl[j].f.substring(0, e)];
            }
            else
                tableString += rows[i][nl[j].f];
            tableString += '</td>';
        });
        tableString += '\n</tr>';
    }
    tableString += '\n</table>';
    window.showModalDialog("../print.html", tableString,"location:No;status:No;help:No;dialogWidth:800px;dialogHeight:600px;scroll:auto;");
}

print.html文件

[html] view plain copy

print ?

1. <!DOCTYPE html>  
2. <html xmlns="http://www.w3.org/1999/xhtml">  
3. <head>  
4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
5.     <title>数据打印</title>  
6.     <style type="text/css">  
7.         body {  
8.             background: white;  
9.             margin: 0px;  
10.             padding: 0px;  
11.             font-size: 13px;  
12.             text-align: left;  
13.         }  
14.   
15.         .pb {  
16.             font-size: 13px;  
17.             border-collapse: collapse;  
18.         }  
19.   
20.             .pb th {  
21.                 font-weight: bold;  
22.                 text-align: center;  
23.                 border: 1px solid #333333;  
24.                 padding: 2px;  
25.             }  
26.   
27.             .pb td {  
28.                 border: 1px solid #333333;  
29.                 padding: 2px;  
30.             }  
31.     </style>  
32. </head>  
33. <body>  
34.     <script type="text/javascript">  
35.         document.write(window.dialogArguments);  
36.         window.print();  
37.     </script>  
38. </body>  
39. </html>  

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>数据打印</title>
    <style type="text/css">
        body {
            background: white;
            margin: 0px;
            padding: 0px;
            font-size: 13px;
            text-align: left;
        }

        .pb {
            font-size: 13px;
            border-collapse: collapse;
        }

            .pb th {
                font-weight: bold;
                text-align: center;
                border: 1px solid #333333;
                padding: 2px;
            }

            .pb td {
                border: 1px solid #333333;
                padding: 2px;
            }
    </style>
</head>
<body>
    <script type="text/javascript">
        document.write(window.dialogArguments);
        window.print();
    </script>
</body>
</html>

调用方式如下：

[html] view plain copy

print ?

1. <a href="javascript:void(0);" onclick="CreateFormPage('打印测试', $('#grid'));">打印</a>  

<a href="javascript:void(0);" οnclick="CreateFormPage('打印测试', $('#grid'));">打印</a>