我用设备尝试了kendo ui print但没有工作......我怎么办？ [英] I tried kendo ui print with device but not working..How can I do ?
本文介绍了我用设备尝试了kendo ui print但没有工作......我怎么办？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试了此代码段：
I tried this code snippet:
<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'),
doc = win.document.open();
var htmlStart =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<title>Kendo UI Grid</title>' +
'<link href="http://cdn.kendostatic.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-grid-toolbar, .k-grid-pager > .k-link { display: none; }' +
'</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();
});
});
如何在设备上运行？
How can I run on the device ?
推荐答案
（' ＃grid'），
printableContent = ' '，
win = window .open（' '，' '，' width = 800，height = 500'），
doc = win。 document .open（）;
var htmlStart =
' <！DOCTYPE html>' +
' < html>' +
' < head>' +
' < meta charset =utf-8/>' +
< title> Kendo UI Grid< / title>' +
' < link href =http://cdn.kendostatic.com/ + kendo.version + ' / styles / kendo.common.min.css =stylesheet/> ' +
' < style>' +
< span class =code-string>' html {font：11pt sans-serif; }' +
' 。k-grid {border-top-width：0; }' +
' 。k-grid，.k-grid-content {height：自动！重要; }' +
' 。k-grid-content {overflow：visible！important; }' +
' div.k-grid table {table-layout：auto;宽度：100％！重要; }' +
' 。k-grid .k-grid-header th {border-顶部：1px固体; }' +
' 。k-grid-toolbar，.k-grid-pager> ; .k-link {display：none; }' +
' < / style>' +
' < / head>' +
' < body>';
var htmlEnd =
' < / body>' +
' < / html>' ;
var gridHeader = gridElement.children（' K-网格报头'）;
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（）;
}
('#grid'), printableContent = '', win = window.open('', '', 'width=800, height=500'), doc = win.document.open(); var htmlStart = '<!DOCTYPE html>' + '<html>' + '<head>' + '<meta charset="utf-8" />' + '<title>Kendo UI Grid</title>' + '<link href="http://cdn.kendostatic.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-grid-toolbar, .k-grid-pager > .k-link { display: none; }' + '</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 =
(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（
('#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(
这篇关于我用设备尝试了kendo ui print但没有工作......我怎么办？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
