ASP.NET MVC5+EF6+EasyUI 后台管理系统（92）-打印EasyUI 的datagrid表格

ymnets

前言

应用系统有时候需要打印Datagrid的表格内容，我们本节就来学习打印datagrid内容

打印主要使用：web打印（我们之前有讲过web打印插件jqprint） + 将datagrid重新编制成可以打印的html格式

一、建立一个普通的例子

我们使用官方下载的demo下的datagrid basic.html代码就好

引入Jqgrid打印插件，并增加一个按钮来触发打印事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script src="jquery.jqprint-0.3.js"></script>
</head>
<body>
    <h2>Basic DataGrid</h2>
    <p>The DataGrid is created from markup, no JavaScript code needed.</p>
    <div id="modalwindow" class="easyui-window" style="width:800px; height:400px;" data-options="modal:true,closed:true,minimizable:false,shadow:false"></div>
    <div style="margin:20px 0;"><a href="#" id="btnPrint" class="easyui-linkbutton" data-options="iconCls:\'icon-print\'" style="width:80px">Print</a></div>

    <table id="List" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
           data-options="singleSelect:true,collapsible:true,method:\'get\'">
        <thead>
            <tr>
                <th data-options="field:\'itemid\',width:80">Item ID</th>
                <th data-options="field:\'productid\',width:100">Product</th>
                <th data-options="field:\'listprice\',width:80,align:\'right\'">List Price</th>
                <th data-options="field:\'unitcost\',width:80,align:\'right\'">Unit Cost</th>
                <th data-options="field:\'attr1\',width:250">Attribute</th>
                <th data-options="field:\'status\',width:60,align:\'center\'">Status</th>
            </tr>
        </thead>
    </table>
    <script type="text/javascript">
        $(function () {
　　　　　　　　//由于本地无法直接读取json文件，所以将数据提取出来赋值
            var obj = {
                "total": 28, "rows": [
        { "productid": "FI-SW-01", "productname": "Koi", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },
        { "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },
        { "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr1": "Venomless", "itemid": "EST-11" },
        { "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },
        { "productid": "RP-LI-02", "productname": "Iguana", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },
        { "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },
        { "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },
        { "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "Adult Female", "itemid": "EST-16" },
        { "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },
        { "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }
                ]
            }
            ;
//加载数据
            $(\'#List\').datagrid(\'loadData\', obj);

    });


    </script>
</body>
</html>

 

 

二、将datagrid数据分解成HTML Table表格

function CreateFormPage(printDatagrid) {
    var tableString = \'<div class="mvctool bgb"><a onclick="$(\\'.dg-pb\\').jqprint();" class="btn btn-default"><span class="fa fa-print"></span>&nbsp;打印</a></div><table cellspacing="0" class="dg-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) {

                if (rows[i][nl[j].f.substring(0, e)] != null) {
                    tableString += rows[i][nl[j].f.substring(0, e)];
                } else {
                    tableString += "";
                }
            }
            else { 
                if (rows[i][nl[j].f] != null) {
                    tableString += rows[i][nl[j].f];
                } else {
                    tableString += "";
                }

            }
            tableString += \'</td>\';
        });
        tableString += \'\n</tr>\';
    }
    tableString += \'\n</table>\';

    return tableString;
}

代码看起来有点复杂，但是不难看懂，提取datagrid的title和历遍数据得重新写入一个新的table

三、添加打印事件

     $("#btnPrint").click(function () {
            var tablestr = CreateFormPage($("#List"));
            $("#modalwindow").html(tablestr);
            $("#modalwindow").window({ title: "打印", width:500, height: 400, iconCls: \'fa fa-plus\' }).window(\'open\');
        });

四、预览结果

总结：

不是很美观，那么加入一段CSS吧

/*datagrid print*/
.dg-pb{font-size:13px;border-collapse:collapse;}
.dg-pb th{font-weight:bold;text-align:center;border:1px solid #333333;padding:2px;}
.dg-pb td{border:1px solid #333333;padding:2px;}

 

再次在预览的结果点击打印调出打印机

 本节完整代码下载

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script src="jquery.jqprint-0.3.js"></script>
</head>

<body>
    <style>
        /*datagrid print*/
.dg-pb{font-size:13px;border-collapse:collapse;}
.dg-pb th{font-weight:bold;text-align:center;border:1px solid #333333;padding:2px;}
.dg-pb td{border:1px solid #333333;padding:2px;}
    </style>
    <h2>Basic DataGrid</h2>
    <p>The DataGrid is created from markup, no JavaScript code needed.</p>
    <div id="modalwindow" class="easyui-window" style="width:800px; height:400px;" data-options="modal:true,closed:true,minimizable:false,shadow:false"></div>
    <div style="margin:20px 0;"><a href="#" id="btnPrint" class="easyui-linkbutton" data-options="iconCls:\'icon-print\'" style="width:80px">Print</a></div>

    <table id="List" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
           data-options="singleSelect:true,collapsible:true,method:\'get\'">
        <thead>
            <tr>
                <th data-options="field:\'itemid\',width:80">Item ID</th>
                <th data-options="field:\'productid\',width:100">Product</th>
                <th data-options="field:\'listprice\',width:80,align:\'right\'">List Price</th>
                <th data-options="field:\'unitcost\',width:80,align:\'right\'">Unit Cost</th>
                <th data-options="field:\'attr1\',width:250">Attribute</th>
                <th data-options="field:\'status\',width:60,align:\'center\'">Status</th>
            </tr>
        </thead>
    </table>
    <script type="text/javascript">
        $(function () {

            var obj = {
                "total": 28, "rows": [
        { "productid": "FI-SW-01", "productname": "Koi", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },
        { "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },
        { "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr1": "Venomless", "itemid": "EST-11" },
        { "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },
        { "productid": "RP-LI-02", "productname": "Iguana", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },
        { "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },
        { "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },
        { "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "Adult Female", "itemid": "EST-16" },
        { "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },
        { "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }
                ]
            }
            ;
            $(\'#List\').datagrid(\'loadData\', obj);

        $("#btnPrint").click(function () {
            var tablestr = CreateFormPage($("#List"));
            $("#modalwindow").html(tablestr);
            $("#modalwindow").window({ title: "打印", width:700, height: 400, iconCls: \'fa fa-plus\' }).window(\'open\');
        });
    });

    function CreateFormPage(printDatagrid) {
        var tableString = \'<div class="mvctool bgb"> <a href="#" id="btnPrint" class="easyui-linkbutton" data-options="iconCls:\\'icon-print\\'" style="width:80px" onclick="$(\\'.dg-pb\\').jqprint();">打印</a></div><table cellspacing="0" class="dg-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) {

                    if (rows[i][nl[j].f.substring(0, e)] != null) {
                        tableString += rows[i][nl[j].f.substring(0, e)];
                    } else {
                        tableString += "";
                    }
                }
                else {
                    if (rows[i][nl[j].f] != null) {
                        tableString += rows[i][nl[j].f];
                    } else {
                        tableString += "";
                    }

                }
                tableString += \'</td>\';
            });
            tableString += \'\n</tr>\';
        }
        tableString += \'\n</table>\';

        return tableString;
    }

    </script>
</body>
</html>
View Code

 

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode