Question

我正在尝试打印剑道网格的所有页面我搜索了很多我使用过这个链接 http://docs.telerik.com/KENDO-UI/controls/data-management/grid/walkthrough#printing

打印网格，但它会打印当前页面。像这样

注意链接名称仍显示为链接，用户可以在打印页面中按此键。

我尝试使用此代码加载所有页面，但它不起作用，因为它显示打印页面然后加载所有页面项目的网格

 var dataSource = gridElement.data("kendoGrid").dataSource;
    dataSource.pageSize(dataSource.total());

我想以友好的布局打印网格的所有页面，例如一个导出网格，以便将其导出友好的网格进行打印

修改1

这是我的脚本打印所有网格页但不起作用

$('#printGrid').click(function () {
    printGrid();
});
function printGrid() {
    var gridElement = $('#PageGrid'),
        printableContent = '',
        win = window.open('', '', 'width=800, height=500');
    var dataSource = gridElement.data("kendoGrid").dataSource;
    dataSource.pageSize(dataSource.total());

    var htmlStart =
       '<!DOCTYPE html>' +
       '<html>' +
       '<head>' +
       '<link href="http://kendo.cdn.telerik.com/' + kendo.version + '/styles/kendo.common.min.css" rel="stylesheet" /> ' +
       '<meta charset="utf-8" />' +
       '<title>@GlobalResources.Print</title>' +
       '<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 = win.document.open();
    doc.write(htmlStart + printableContent + htmlEnd);
    doc.close();
    win.print();

}

Answer 1

var gridElement = $('#PopUpGrid'),
             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="http://kendo.cdn.telerik.com/' + kendo.version + '/styles/kendo.common.min.css" rel="stylesheet" /> ' +
             '</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].innerHTML;
         } else {
             printableContent = gridElement.clone()[0].innerHTML;
         }

         doc.write(htmlStart + printableContent + htmlEnd);
         doc.close();
         win.print();
     }

我希望你觉得它很有用。随意评论我的错误感谢。

在kendo网格中打印所有页面

1 个答案: