文檔半島外圍網上直營>>Kendo UI使用教程-2019>>Kendo UI for jQuery數據管理使用教程：打印
Kendo UI for jQuery數據管理使用教程：打印
Kendo UI for jQuery R2 2020 SP1試用版下載
Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創建現代Web應用程序的最完整UI庫。
打印
即使Grid的內容可能不是頁面上的唯一內容，Grid也提供忽略頁面其余部分并僅打印其內容的選項。
要僅從頁面上打印Grid，請使用以下兩種方法：
- 打印現有頁面，并使用打印CSS隱藏不相關的內容。
- 打印僅帶有Grid的單獨網頁。
打印現有網頁
若要僅將Grid作為現有網頁的一部分進行打印，請使用打印樣式表隱藏頁面中不需要的部分，確切的CSS打印取決于現有頁面內容。
打印新網頁
下面的示例演示如何檢索Grid的HTML，如何將其注入到新的瀏覽器窗口中以及打印新頁面。 此方法還解決了以下重要問題：
- Grid是可滾動的，則某些行或列在打印的紙張上可能不可見。 因此，在易于打印的頁面上禁用Grid高度和可滾動性。
- 根據列的寬度，某些單元格內容可能會被剪裁而無法完全看到。 通過強制對Grid表強制使用自動表布局（可禁用省略號（...）），可以解決此問題。
- 如果啟用了滾動（除Grid的MVC封裝器以外，默認情況下已設置滾動），則Grid會為標題區域呈現一個單獨的表。 因為瀏覽器不關聯兩個Grid表，所以它不會在每個打印頁面的頂部重復標題行。 下面的示例演示了如何通過將標題表行復制到數據表中來解決此問題。
- 當您打印具有鎖定（凍結）列的Grid時，結果列或行可能未對齊，或者整體布局可能損壞。 在這種情況下，請使用沒有凍結列的單獨的打印友好的Grid實例。
<div id="grid"></div> <script type="text/x-kendo-template" id="toolbar-template"> <button type="button" class="k-button" id="printGrid">Print Grid</button> </script>
function printGrid() {
var gridElement = $('#grid'),
printableContent = '',
win = window.open('', '', 'width=800, height=500, resizable=1, scrollbars=1'),
doc = win.document.open();
var htmlStart =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<title>Kendo UI Grid</title>' +
'<link + kendo.version + '/styles/kendo.common.min.css" rel="stylesheet" /> ' +
'<style>' +
'html { font: 11pt sans-serif; }' +
'.k-grid { border-top-width: 0; }' +
'.k-grid, .k-grid-content { height: auto !important; }' +
'.k-grid-content { overflow: visible !important; }' +
'div.k-grid table { table-layout: auto; width: 100% !important; }' +
'.k-grid .k-grid-header th { border-top: 1px solid; }' +
'.k-grouping-header, .k-grid-toolbar, .k-grid-pager > .k-link { display: none; }' +
// '.k-grid-pager { display: none; }' + // optional: hide the whole pager
'</style>' +
'</head>' +
'<body>';
var htmlEnd =
'</body>' +
'</html>';
var gridHeader = gridElement.children('.k-grid-header');
if (gridHeader[0]) {
var thead = gridHeader.find('thead').clone().addClass('k-grid-header');
printableContent = gridElement
.clone()
.children('.k-grid-header').remove()
.end()
.children('.k-grid-content')
.find('table')
.first()
.children('tbody').before(thead)
.end()
.end()
.end()
.end()[0].outerHTML;
} else {
printableContent = gridElement.clone()[0].outerHTML;
}
doc.write(htmlStart + printableContent + htmlEnd);
doc.close();
win.print();
}
$(function () {
var grid = $('#grid').kendoGrid({
dataSource: {
type: 'odata',
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
toolbar: kendo.template($('#toolbar-template').html()),
height: 400,
pageable: true,
columns: [
{ field: 'ProductID', title: 'Product ID', width: 100 },
{ field: 'ProductName', title: 'Product Name' },
{ field: 'UnitPrice', title: 'Unit Price', width: 100 },
{ field: 'QuantityPerUnit', title: 'Quantity Per Unit' }
]
});
$('#printGrid').click(function () {
printGrid();
});
});
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線