EasyUI Forum
September 14, 2025, 06:59:21 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > Export data grid to ... html table
Pages: [1]
« previous next »
  Print  
Author Topic: Export data grid to ... html table  (Read 19368 times)
korenanzo
Guest
« on: August 02, 2016, 02:07:27 AM »
Hi,

I need to export the datagrid to a html table;

well actually not the  whole datagrid but what its showed by the current view.

I mean: the user could move or hide  columns, order them , add totals and subtotals; moreover the could have a custom data view, with colors and images ...

well, I'd like to have this view exported in html (and pdf as well).

Any way to do this?

Thanks,
RIc
Logged
jarry
Administrator
Hero Member
*****
Posts: 2298


View Profile Email
« Reply #1 on: August 02, 2016, 08:17:04 AM »
It is more suitable to export data from the remote server. No built-in method to export the datagrid but you can call 'getRows' method to get the current rows and then build the html table manually.
Logged
korenanzo
Guest
« Reply #2 on: August 02, 2016, 08:37:56 AM »
the problem is that the user should print (pdf) the data as seen in the current view, not as known by the server.

for the same reason I cannot use getRows(), 'cause it sports only de data, not the view
Logged
jarry
Administrator
Hero Member
*****
Posts: 2298


View Profile Email
« Reply #3 on: August 02, 2016, 08:37:55 PM »
You can use 3rd library to export to pdf. Here is the example that uses the jspdf library and autotable plugin to export the datagrid to PDF.

http://code.reloado.com/uqiwur/edit#preview
Logged
korenanzo
Guest
« Reply #4 on: August 03, 2016, 12:12:00 AM »
I am trying to help myself Smiley

I've modified an old piece of code by stworty, I think, and made this:
Code:

$.extend($.fn.datagrid.methods, {

	toHtml: function(jq, style){
        return jq.each(function(){
           var   format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
          var template= '<html ><head><style>{style}</style></head><body><table  >{table}</table></body></html>'
            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 theader = view.find('.datagrid-header-row').clone();
            var tbody = table.find('>tbody');
	    table.prepend(theader);
            view.find('div.datagrid-view1 table.datagrid-btable>tbody>tr').each(function(index){
                $(this).clone().children().prependTo(tbody.children('tr:eq('+index+')'));
            });
			
	     var style =style ||  " table {border:1px solid #aaa;  }  td {white-space: nowrap;border:1px solid #ddd; font-family:Tahoma;}  .datagrid-header-row { background-color:#eee; } "
		var lista = { style:style,table: table.html() }
		var dd =format(template, lista)
 		var w =  window.open('');
		w.document.write(dd);

        })
    }
});

this maintains the features of every cell (colors, formats, column order, hidden columns)

BUT
if using data grid-scrollview and the table is long,it sports only the current page, so I am missing something...


RIc
« Last Edit: August 03, 2016, 12:22:03 AM by korenanzo » Logged
jarry
Administrator
Hero Member
*****
Posts: 2298


View Profile Email
« Reply #5 on: August 03, 2016, 06:22:25 PM »
Here is the simple implement of 'toHtml' method that can export all the rows.
Code:
(function($){
  function makeTable(target){
    var state = $(target).data('datagrid');
    var opts = state.options;
    var fields1 = $(target).datagrid('getColumnFields', true);
    var fields2 = $(target).datagrid('getColumnFields', false);
    var rows = $(target).datagrid('getRows');
    if (opts.view.type == 'scrollview'){
      rows = state.data.firstRows;
    }
    var table = ['<table border=1>'];
    table.push('<thead><tr>');
    if (opts.rownumbers){
      table.push('<th>&nbsp;</th>');
    }
    $.map(fields1.concat(fields2), function(field){
      var col = $(target).datagrid('getColumnOption', field);
      table.push('<th field="'+field+'">'+col.title+'</th>');
    });
    table.push('</tr></thead>');
    table.push('<tbody>');
    $.map(rows, function(row, index){
      table.push('<tr>');
      table.push(opts.view.renderRow(target, fields1, true, index, row));
      table.push(opts.view.renderRow(target, fields2, false, index, row));
      table.push('</tr>');
    });
    table.push('</tbody>');
    table.push('</table>');

    var data = $(table.join(''));
    $.map(fields1.concat(fields2), function(field){
      var col = $(target).datagrid('getColumnOption', field);
      if (col.hidden){
        data.find('td[field="'+field+'"],th[field="'+field+'"]').hide();
      }
    });
    var w =  window.open('');
    w.document.write(data.wrap('<div></div>').parent().html());
  }

  $.extend($.fn.datagrid.methods, {
    toHtml: function(jq){
      return jq.each(function(){
        makeTable(this);
      });
    }
  })
})(jQuery);
« Last Edit: August 04, 2016, 08:31:00 AM by jarry » Logged
korenanzo
Guest
« Reply #6 on: August 03, 2016, 11:55:40 PM »
Thank you carry,
one more thing:

your code shows all the columns even the ones hidden;

how to avoid their presence?

Thanks,

Ric
Logged
jarry
Administrator
Hero Member
*****
Posts: 2298


View Profile Email
« Reply #7 on: August 04, 2016, 08:33:44 AM »
Please look at the 'toHtml' method in previous post. The hidden columns aren't exported.
Logged
korenanzo
Guest
« Reply #8 on: August 05, 2016, 12:52:31 AM »
It seems ok now, thank you Smiley
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!