Print Page - Export data grid to ... html table

Title: Export data grid to ... html table
Post by: korenanzo 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

Title: Re: Export data grid to ... html table
Post by: jarry 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.

Title: Re: Export data grid to ... html table
Post by: korenanzo 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

Title: Re: Export data grid to ... html table
Post by: jarry 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

Title: Re: Export data grid to ... html table
Post by: korenanzo on August 03, 2016, 12:12:00 AM

I am trying to help myself :)

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

Title: Re: Export data grid to ... html table
Post by: jarry 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);

Title: Re: Export data grid to ... html table
Post by: korenanzo 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

Title: Re: Export data grid to ... html table
Post by: jarry on August 04, 2016, 08:33:44 AM

Please look at the 'toHtml' method in previous post. The hidden columns aren't exported.

Title: Re: Export data grid to ... html table
Post by: korenanzo on August 05, 2016, 12:52:31 AM

It seems ok now, thank you :)

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: korenanzo on August 02, 2016, 02:07:27 AM