Kendo UI for jQuery資料管理使用教程：列印
阿新 • • 發佈：2020-08-06
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 href="https://kendo.cdn.telerik.com/' + 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: "https://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();
});
});