• <menu id="w2i4a"></menu>
  •
    logo Kendo UI使用教程-2019
    文檔首頁(yè)>>Kendo UI使用教程-2019>>Kendo UI for jQuery數(shù)據(jù)管理使用教程：打印

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

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

});

    了解最新Kendo UI最新資訊，請(qǐng)關(guān)注Telerik中文網(wǎng)！

    慧都高端UI界面開(kāi)發(fā)
    掃碼咨詢


    添加微信 立即咨詢

    電話咨詢

    客服熱線
    023-68661681

    TOP
    三级成人熟女影院,欧美午夜成人精品视频,亚洲国产成人乱色在线观看,色中色成人论坛 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();