Print Page - Datagrid to Excel

Title: Datagrid to Excel
Post by: rezzonico on August 28, 2015, 08:29:17 AM

Hi all,

I am trying to export a Datagrid to Excel.
I have found the following thread:
http://www.jeasyui.com/forum/index.php?topic=4192.0

The solution works very well.

I only have the following problem:
if I export a Datagrid with 10 lines, an Excel file with 19 lines is created (9 blank lines are added between the data).
Is it possible to avoid the creation of the blank lines ?

I have tryed to modify the code but without success.

Any help is appreciated.

Regards.
Miche

Title: Re: Datagrid to Excel
Post by: devnull on August 29, 2015, 04:18:13 AM

This is what I am using, it works fine in all my datagrids and also supports frozen columns.

Code:

$.extend($.fn.datagrid.methods, {
  toExcel: function(jq, filename){
    return jq.each(function(){
      var uri = 'data:application/vnd.ms-excel;base64,'
      , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
      , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
      , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }

      var alink = $('<a style="display:none"></a>').appendTo('body');
      var view = $(this).datagrid('getPanel').find('div.datagrid-view');
      
      var table = view.find('div.datagrid-view2 table.datagrid-btable').clone();
      var tbody = table.find('>tbody');
      view.find('div.datagrid-view1 table.datagrid-btable>tbody>tr').each(function(index){
        $(this).clone().children().prependTo(tbody.children('tr:eq('+index+')'));
      });
      
      var head = view.find('div.datagrid-view2 table.datagrid-htable').clone();
      var hbody = head.find('>tbody');
      view.find('div.datagrid-view1 table.datagrid-htable>tbody>tr').each(function(index){
        $(this).clone().children().prependTo(hbody.children('tr:eq('+index+')'));
      });    
      hbody.prependTo(table);
      
      var ctx = { worksheet: name || 'Worksheet', table: table.html()||'' };
      alink[0].href = uri + base64(format(template, ctx));
      alink[0].download = filename;
      alink[0].click();
      alink.remove();
    })
  }
});

Title: Re: Datagrid to Excel
Post by: rezzonico on August 31, 2015, 07:07:42 AM

Hi devnull,

thanks for your answer.
The code that I use is exacly your code.
Looking in my code I found that the problem is when adding "view: datailview" in a datagrid.

When using "view: datailview" the following line is added after each line:

<tr style="display:none;"><td colspan="1" style="border-right:0"><div class="datagrid-row-detail"> </div></td><td colspan="4"><div class="datagrid-row-detail"><div class="ddv"></div></div></td></tr>

Can someone help me in modifying the code (I think that the solution is to remove the above line) ?
I have tried but without success ...

Thanks in advance.
Miche

Title: Re: Datagrid to Excel
Post by: rezzonico on September 01, 2015, 03:50:36 AM

I have found the following solution:

table.find('[style*="display:none"]').remove();

Regards
Miche

Title: Re: Datagrid to Excel
Post by: devnull on September 02, 2015, 04:39:34 AM

Hi, sorrie, but I have never used 'detailviews', I am just using standard datagrids.

Title: Re: Datagrid to Excel
Post by: rezzonico on September 02, 2015, 05:32:26 AM

No problem,

your script helped me a lot.

Thanks !
Miche

Title: Re: Datagrid to Excel
Post by: jmansur on September 03, 2015, 05:31:26 AM

Hi.

I try using this solution in a datagrid - bufferview , but when I exported the records, I only exported the amount of the pageSize property records .

It's happened ?

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: rezzonico on August 28, 2015, 08:29:17 AM