Print Page - Export datagrid Extension to include footer summary and Table caption

Title: Export datagrid Extension to include footer summary and Table caption
Post by: Alfred on November 19, 2019, 10:01:18 AM

The export datagrid feature is very nice. However, It does not include the footer summary in the result. How do I include the footer summary in the exported table? Is it possible to include our own table caption in the exported version? Normally I used MPDF and phpspreadsheet but when it comes to directly printing html I prefer datagrid export extension. Please can you add the following features:

Include footer summary in the exported table
Include option for passing table caption in the exported table

Reference: https://www.jeasyui.com/extension/datagrid_export.php

Regards,
Alfred

Title: Re: Export datagrid Extension to include footer summary and Table caption
Post by: jarry on November 20, 2019, 12:26:30 AM

The 'footer' and 'caption' properties are available. Please download 'datagrid-export.js file from https://www.jeasyui.com/extension/datagrid_export.php

Code:

$('#dg').datagrid('toExcel', {
    filename: 'datagrid.xls',
    worksheet: 'Worksheet',
    caption: 'Caption',
    rows: rows,
    footer: [{
        productid: 'Summary',
        listprice: 30
    },{
        productid: 'Summary',
        listprice: 40
    }]
});

Title: Re: Export datagrid Extension to include footer summary and Table caption
Post by: Alfred on November 20, 2019, 11:16:39 AM

The caption and the footer work. but how do I style the caption? In addition the alignment does not work. Amount here is aligned right, but in the printed output it is aligned left.

Code:

<table id="dg" class="easyui-datagrid" url="data.php" showFooter="true">
   <thead>
        <tr>
            <th field="note" halign="center" width="20" sortable="true" align="left">Item</th>
            <th field="amount" halign="center" width="20" sortable="true" align="right">Amount</th>
   </thead>
</table>
function printList(){
   $('#dg').datagrid('print', {
        title:"List of Data",
        caption: 'List of Data',
        footer: $('#dg').datagrid('getFooterRows')
    });
}

Regards.
Alfred

Title: Re: Export datagrid Extension to include footer summary and Table caption
Post by: jarry on November 20, 2019, 07:26:16 PM

The alignment issue has been fixed. Please update the 'datagrid-export.js' file.

Code:

$('#dg').datagrid('print', {
    title:"List of Data",
    caption: '<div style="padding:10px;">List of Data</div>'
});

Title: Re: Export datagrid Extension to include footer summary and Table caption
Post by: Alfred on November 21, 2019, 07:54:31 AM

Thanks for the reply. Now all the exported columns are center aligned. I have tested with the following codes:

Code:

<th field="id" halign="center" width="20" sortable="true" align="left">Id</th>
<th field="note" halign="center" width="20" sortable="true" align="left">Note</th>
<th field="entrydate" halign="center" width="20" sortable="true" align="center">Note</th>

I all the column names to be centered, so I used

Code:

halign="center"

however in the printed html all columns are aligned center regardless of the

Code:

align="left"

being used. I hope you can fix the issue.

Thanks and regard,

Alfred

Title: Re: Export datagrid Extension to include footer summary and Table caption
Post by: jarry on November 21, 2019, 07:18:16 PM

The issue has been fixed. Please re-download it again.

Title: Re: Export datagrid Extension to include footer summary and Table caption
Post by: Alfred on November 22, 2019, 10:23:27 AM

Thanks a million Jarry. it is fixed.

EasyUI Forum

General Category => General Discussion => Topic started by: Alfred on November 19, 2019, 10:01:18 AM