足交91,亚洲精品福利,国产激情偷拍

Kendo UI for jQuery數(shù)據(jù)管理使用教程：打印

原創(chuàng)|使用教程|編輯：龔雪|2020-08-05 10:11:37.183|閱讀 352 次

概述：Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)，即使Grid的內(nèi)容可能不是頁(yè)面上的唯一內(nèi)容，Grid也提供忽略頁(yè)面其余部分并僅打印其內(nèi)容的選項(xiàng)。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷售中 >>

相關(guān)鏈接：

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四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)。

打印

即使Grid的內(nèi)容可能不是頁(yè)面上的唯一內(nèi)容，Grid也提供忽略頁(yè)面其余部分并僅打印其內(nèi)容的選項(xiàng)。

要僅從頁(yè)面上打印Grid，請(qǐng)使用以下兩種方法：

打印現(xiàn)有頁(yè)面，并使用打印CSS隱藏不相關(guān)的內(nèi)容。
打印僅帶有Grid的單獨(dú)網(wǎng)頁(yè)。

打印現(xiàn)有網(wǎng)頁(yè)

若要僅將Grid作為現(xiàn)有網(wǎng)頁(yè)的一部分進(jìn)行打印，請(qǐng)使用打印樣式表隱藏頁(yè)面中不需要的部分，確切的CSS打印取決于現(xiàn)有頁(yè)面內(nèi)容。

打印新網(wǎng)頁(yè)

下面的示例演示如何檢索Grid的HTML，如何將其注入到新的瀏覽器窗口中以及打印新頁(yè)面。此方法還解決了以下重要問(wèn)題：

Grid是可滾動(dòng)的，則某些行或列在打印的紙張上可能不可見(jiàn)。因此，在易于打印的頁(yè)面上禁用Grid高度和可滾動(dòng)性。
根據(jù)列的寬度，某些單元格內(nèi)容可能會(huì)被剪裁而無(wú)法完全看到。通過(guò)強(qiáng)制對(duì)Grid表強(qiáng)制使用自動(dòng)表布局（可禁用省略號(hào)（...）），可以解決此問(wèn)題。
如果啟用了滾動(dòng)（除Grid的MVC封裝器以外，默認(rèn)情況下已設(shè)置滾動(dòng)），則Grid會(huì)為標(biāo)題區(qū)域呈現(xiàn)一個(gè)單獨(dú)的表。因?yàn)闉g覽器不關(guān)聯(lián)兩個(gè)Grid表，所以它不會(huì)在每個(gè)打印頁(yè)面的頂部重復(fù)標(biāo)題行。下面的示例演示了如何通過(guò)將標(biāo)題表行復(fù)制到數(shù)據(jù)表中來(lái)解決此問(wèn)題。
當(dāng)您打印具有鎖定（凍結(jié)）列的Grid時(shí)，結(jié)果列或行可能未對(duì)齊，或者整體布局可能損壞。在這種情況下，請(qǐng)使用沒(méi)有凍結(jié)列的單獨(dú)的打印友好的Grid實(shí)例。

<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();
});

});