Kendo UI for jQuery数据管理使用教程:打印

原创|使用教程|编辑:龚雪|2020-08-05 10:11:37.183|阅读 40 次

概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库,即使Grid的内容可能不是页面上的唯一内容,Grid也提供忽略页面其余部分并仅打印其内容的选项。

# 购买正版开发软件送开发入门教材和电子资料,点击进入了解详情 #

相关链接:

Kendo UI for jQuery R2 2020 SP1试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo 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();
});

});


了解最新Kendo UI最新资讯,请关注Telerik中文网!

慧都高端UI界面开发


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:慧都网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

Kendo UI for jQuery

完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat