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庫。

 

打印

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

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

打印現(xiàn)有頁面，并使用打印CSS隱藏不相關(guān)的內(nèi)容。

打印僅帶有Grid的單獨(dú)網(wǎng)頁。

 

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

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

 

打印新網(wǎng)頁

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

• Grid是可滾動(dòng)的，則某些行或列在打印的紙張上可能不可見。因此，在易于打印的頁面上禁用Grid高度和可滾動(dòng)性。

• 根據(jù)列的寬度，某些單元格內(nèi)容可能會(huì)被剪裁而無法完全看到。 通過強(qiáng)制對(duì)Grid表強(qiáng)制使用自動(dòng)表布局（可禁用省略號(hào)（…）），可以解決此問題。

• 如果啟用了滾動(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è)打印頁面的頂部重復(fù)標(biāo)題行。 下面的示例演示了如何通過將標(biāo)題表行復(fù)制到數(shù)據(jù)表中來解決此問題。

• 當(dāng)您打印具有鎖定（凍結(jié)）列的Grid時(shí)，結(jié)果列或行可能未對(duì)齊，或者整體布局可能損壞。 在這種情況下，請(qǐng)使用沒有凍結(jié)列的單獨(dú)的打印友好的Grid實(shí)例。

 

 

 

function printGrid() {
var gridElement = $(‘#grid’),
printableContent = ”,
win = window.open(”, ”, ‘width=800, height=500, resizable=1, scrollbars=1’),
doc = win.document.open();

var htmlStart =
‘’ +
‘

’ +
‘’ +
‘’ +
‘

’ +
‘

 ‘ +
‘ ’ +
‘’ +
‘

var htmlEnd =
‘’ +
‘’;

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

});