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

 

前言

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

打印主要使用:

<!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

                    
                
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信