Exporting Tables

[ardhaps]

Hi there. In which way do I should make to export the tables? I try to not use examples, thus I just loadSheet jquery.sheet.html. The problem is when I export the tables to XLS (I use btechco_excelexport), the menus and the others in the mainWrapper is also exported. I thought that's because there's no table ID, but later still couldn't find it.

Some suggestion may help me, thanks.

[robertleeplummerjr]

In what format would you like the spreadsheet? Json, XML, or HTML? Those are the currently supported modes. On Jan 30, 2014 4:21 AM, "ardhaps" notifications@github.com wrote:

Hi there. In which way do I should make to export the tables? I try to not use examples, thus I just loadSheet jquery.sheet.html. The problem is when I export the tables to XLS (I use btechco_excelexport), the menus and the others in the mainWrapper is also exported. I thought that's because there's no table ID, but later still couldn't find it.

Some suggestion may help me, thanks.

Reply to this email directly or view it on GitHubhttps://github.com/Spreadsheets/jQuery.sheet/issues/9 .

[robertleeplummerjr]

If you were to create a sheet using the following code:

var mySheetParent = $('#mySheetId').sheet(),
  mySheet = mySheetParent.getSheet();

You could then export the sheet in a few different ways, optionally the latter two use the dts plugin:

• To html mySheetParent.tables();
• To json $.sheet.dts.fromTables.json(mySheet);
• To xml $.sheet.dts.fromTables.xml(mySheet);

If you'd like to create a method in jQuery.sheet that uses these plugins, it would be quite easy, and I'd love a new contributor. Something like this would be fantastic!:

• mySheet.json(); or
• mySheet.xml();

Thanks for having interest in my code!

[meisyal]

I have same problem too. The problem is putting the code of export excel plugins ( btechco_excelexport) on your jQuery Sheet. Would you like to give an example? Because, I have a bug that was export all menu and icon in your spreadsheets. Btw, sorry for my bad English.

[ardhaps]

I've tried something like this

$(function(){       
     $('#div').sheet({ 
    buildSheet: jQuery.sheet.makeTable.xml(myXmlVariable) 
  });
        $(document).ready(function () {
                $("#btnExport").click(function () {
                    jQuery().sheetInstance.export.xml()
                });
            });
    ....

Nothing appears. No spreadsheet appears. And, I still get problem with putting the menu bar.

Are there some suggestions?? Thanks.

[robertleeplummerjr]

The xml data transformation service was moved into the dts plugin in version 3.1. Try this after including the dts plugin within your html page:

$(function(){ var div = $('#div') .html($.sheet.dts.toTable.xml(myXmlVariable)) .sheet();

$("#btnExport")
  .click(function () {
    console.log($.sheet.dts.fromTable.xml(div.getSheet());
  });  });

On Mon, Feb 3, 2014 at 10:43 AM, ardhaps notifications@github.com wrote:

I've tried something like this

$(function(){ $('#div').sheet({ buildSheet: jQuery.sheet.makeTable.xml(myXmlVariable) }); $(document).ready(function () { $("#btnExport").click(function () { jQuery().sheetInstance.export.xml() }); }); ....

Nothing appears. And, I still get problem with putting the menu bar.

Is there some suggestions?? Thanks.

Reply to this email directly or view it on GitHubhttps://github.com/Spreadsheets/jQuery.sheet/issues/9#issuecomment-33966650 .

Robert Plummer

[ardhaps]

Still don't get anything. And, whether I use or not use these following codes:

window.loadSheet = function (obj, url) {... and loadSheet({}, '');

,it doesn't make any change.

[robertleeplummerjr]

Can I see your whole html file?

On Mon, Feb 3, 2014 at 11:31 AM, ardhaps notifications@github.com wrote:

Still don't get anything. And, whether I use or not use these following codes:

ruby window.loadSheet = function (obj, url) {... and ruby loadSheet({}, '');

,it doesn't make any change.

Reply to this email directly or view it on GitHubhttps://github.com/Spreadsheets/jQuery.sheet/issues/9#issuecomment-33971775 .

Robert Plummer

[ardhaps]

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
        <meta http-equiv="Pragma" content="no-cache"/>
        <meta http-equiv="Expires" content="-1"/>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
        <meta content="utf-8" http-equiv="encoding"/>

        <title>jQuery.sheet - The Ajax Spreadsheet</title>

        <link rel="stylesheet" type="text/css" href="jquery.sheet.css">
        <link rel="stylesheet" type="text/css" href="./jquery-ui/theme/jquery-ui.min.css">

        <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="plugins/globalize.js"></script>
        <script type="text/javascript" src="parser/formula/formula.js"></script>
        <script type="text/javascript" src="parser/tsv/tsv.js"></script>
        <script type="text/javascript" src="jquery.sheet.min.js"></script>
        <script type="text/javascript" src="jquery.sheet.dts.js"></script>

        <!--Optional-->
            <!--Nearest-->
            <script type="text/javascript" src="plugins/jquery.nearest.min.js"></script>
            <!--/Nearest-->
            <!--jQuery UI-->
                <script type="text/javascript" src="jquery-ui/ui/jquery-ui.min.js"></script>
            <!--/jQuery UI-->
            <!--Raphaeljs - for charts-->
                <script type="text/javascript" src="plugins/raphael-min.js"></script>
                <script type="text/javascript" src="plugins/g.raphael-min.js"></script>
            <!--/Raphaeljs-->
            <!--ColorPicker-->
                <link rel="stylesheet" type="text/css" href="plugins/jquery.colorPicker.css" />
                <script type="text/javascript" src="plugins/jquery.colorPicker.min.js"></script>
            <!--/ColorPicker-->
            <!--Theme Switcher Tool-->
                <script type="text/javascript" src="plugins/jquery.themeswitcher.js"></script>
            <!--/Theme Switcher Tool-->
            <!--Elastic-->
                <script type="text/javascript" src="plugins/jquery.elastic.min.js"></script>
            <!--/Elastic-->
            <!--Advanced_Math-->
                <script type="text/javascript" src="plugins/jquery.sheet.advancedfn.js"></script>
            <!--/Advanced_Math-->
            <!--Finance-->
                <script type="text/javascript" src="plugins/jquery.sheet.financefn.js"></script>
            <!--/Finance-->
            <!--Undo-->
                <script type="text/javascript" src="plugins/undomanager.js"></script>
            <!--/Undo-->
            <!--Zero Clipboard-->
            <script type="text/javascript" src="plugins/ZeroClipboard.js"></script>
            <!--/Zero Clipboard-->
            <!--DataTransformationService-->
            <script type="text/javascript" src="plugins/jquery.sheet.dts.js"></script>
            <!--/DataTransformationService-->
        <!--/Optional-->
        <script type="text/javascript">
            $(function(){

                $('#themeSwitcher').themeswitcher({
                    imgpath: "plugins/jquery.themeswitcher.images/",
                    loadTheme: "start"
                });
                //Here is where we initiate the sheets
                //every time sheet is created it creates a new jQuery.sheet.instance (array), to manipulate each sheet, the jQuery object is returned

                    var urls = {sheet: url || $(obj).attr('href'), menuLeft: 'menu.left.html', menuRight: 'menu.right.html'}, results = {}, loadCount = 3, loaded = 0;

                    for(var type in urls) {
                        var tempUrl = urls[type] + (type == 'sheet' ? ' #sheetParent' : '');
                        $(document.createElement('div'))
                                .data('type', type)
                                .load(tempUrl, function() {
                            results[$(this).data('type')] = this.children[0];
                            loaded++;
                            if (loadCount == loaded) {
                                $('#sheet')
                                    .attr('class', results.sheet.className)
                                    .html(results.sheet.children)
                                    .sheet({
                                        title: 'Demo',
                                        menuLeft: function() {
                                            var jS = this,
                                                menu = $(results.menuLeft),
                                                copy = menu.find('.jSCopy').mouseover(function() { $(this).one('mouseout', function() {return false;})}),
                                                cut = menu.find('.jSCut').mouseover(function() { $(this).one('mouseout', function() {return false;})}),
                                                paste = menu.find('.jSPaste').click(function() {
                                                    alert('Press Ctrl + V to paste over highlighted cells');
                                                });

                                            //Give anchors access to jS them
                                            menu.find('a').each(function() {
                                                this.jS = jS;
                                            });

                                            var clip = new ZeroClipboard(copy.add(cut), {
                                                moviePath: "plugins/ZeroClipboard.swf"
                                            });

                                            clip.on('mousedown', function(client) {
                                                clip.setText(jS.tdsToTsv());
                                                $(this).mousedown();
                                            });

                                            cut.mousedown(function() {
                                                jS.tdsToTsv(null, true);
                                            });

                                            return menu;
                                        },
                                        menuRight: function (){
                                            var jS = this,
                                            //we want to be able to edit the html for the menu to make them multi-instance
                                                menu = $(results.menuRight);

                                            //Give anchors access to jS them
                                            menu.find('a').each(function() {
                                                this.jS = jS;
                                            });

                                            //The following is just so you get an idea of how to style cells
                                            menu.find('.colorPickerCell').colorPicker().change(function(){
                                                jS.cellChangeStyle('background-color', $(this).val());
                                            });

                                            menu.find('.colorPickerFont').colorPicker().change(function(){
                                                jS.cellChangeStyle('color', $(this).val());
                                            });

                                            menu.find('.colorPickers').children().eq(1).css('background-image', "url('images/palette.png')");
                                            menu.find('.colorPickers').children().eq(3).css('background-image', "url('images/palette_bg.png')");

                                            return menu;
                                        }
                                    });
                            }
                        });
                    }
                };

                loadSheet({}, 'jquery.sheet.html');

/*              var div = $('#div')
      .html($.sheet.dts.toTable.html())
      .sheet();

    $("#btnExport")
      .click(function () {
        console.log($.sheet.dts.fromTable.html(div.getSheet());
      });
*/
                $('#pseudoSheetsMoreInfo').click(function() {
                    $(this).next().dialog({
                        title: "What is a pseudo sheet?",
                        modal: true
                    });
                })
                    .next().hide();
            });
        </script>
        <!--Page styles-->
        <style>
            body {
                background-color: #464646;
                padding: 0px;
                margin: 0px;
                padding-bottom: 100px;
                color: black;
                font-family: sans-serif;
                font-size: 13px;
            }

            .wrapper {
                margin: 10px;
                background-color: #CCCCCC;
            }

            .locked {
                position: fixed;
                top: expression(eval(document.body.scrollTop) + "px");
                left: 20px;
            }

            #lockedMenu
            {
                width: 225px;
                background-image: none;
            }

            #lockedMenu * {
                font-size: .95em ! important;
                text-decoration: none;
            }

            #header {
                text-align: left;
                font-size: 1.5em;
                padding: 18px;
                border: none;
                padding-left: 150px;
            }

            #footer {
                text-align: center;
                color: white;
                font-size: .9em;
            }

            #footer a {
                font-size: 1.2em;
                color: #FFFFFF;
            }
        </style>
    </head>
    <body>
        <h1 id="header" class="ui-state-default">
            <a href="http://visop-dev.com/Project+jQuery.sheet">
                <img src="images/logo.png" style="position: absolute;top: -20px; left: 20px; border: none;" />
                jQuery.sheet - The Ajax Spreadsheet, Demo
            </a>
            <br />
            <span id="themeSwitcher"></span>
            <button id="btnExport">Export to XLS</button>
        </h1>

        <div id="mainWrapper" class="ui-corner-all wrapper">
        <div id="sheetParent" title="Charts">
            <table style="width: 100%;">
                <tr> 
                    <td colspan="2" style="vertical-align: top;">
                        <div id="sheet" class="jQuerySheet" style="height: 900px;"></div>
                    </td>
                </tr>
            </table>
        </div>
        </div>

        <div id="footer" class="ui-corner-all">
            <a href="http://visop-dev.com/Project+jQuery.sheet">jQuery.sheet() The Ajax Spreadsheet</a>
            | <a href="http://visop-dev.com/contact+us">Get Support!</a>
            | <a href="http://www.VisOp-Dev.com">Home</a>
            | <a href="https://code.google.com/p/jquerysheet/">Code</a>
            | <a href="http://visop-dev.com/doc/js3/index.html">Developer Documentation</a>
            | <a href="http://visop-dev.com/jQuery.sheet+-+End+User+Documentation">End User Documentation</a>
            | <a href="http://jqueryui.com/themeroller/">Create your own theme</a>
            <br/>
            <a href="http://www.opensource.org/licenses/mit-license.html">MIT license</a>
        </div>
    </body>

</html>

[ardhaps]

Sorry, I lost my line window.loadSheet = function (obj, url) { before var urls.... It works when the export-import part is still commented.

[robertleeplummerjr]

Some notes that may help:

$.sheet.dts.fromTable.html is not a function.

$.sheet.dts.fromTable.xml & $.sheet.dts.fromTable.json are and perhaps are what you are trying to call. Either of those take the jQuery.sheet instance (jS for shorthand) and turns it either to xml or json. The sheet, though, must be instantiated before using. It looks to me though that you should be using:

$.sheet.dts.toTable.xml & $.sheet.dts.toTable.json take parsed xml or json and turns it into an html table. Generally you would set the element's html you are calling sheet on with on of these before calling sheet on them.

Let me know if that helps. On Feb 4, 2014 10:12 PM, "ardhaps" notifications@github.com wrote:

Sorry, I lost my line window.loadSheet = function (obj, url) { before var urls.... It works when the export-import part is still commented.

Reply to this email directly or view it on GitHubhttps://github.com/Spreadsheets/jQuery.sheet/issues/9#issuecomment-34133935 .

[ardhaps]

Does it mean I have to change $.sheet.dts.fromTable.html into $.sheet.dts.fromTable.xml ? If so, I doubt it because it still doesn't work. Or, do I put $.sheet.dts.fromTable.xml in incorrect place?

ALSO, what most distracts me is whether function(obj, url) and loadSheet should be used or not.

[robertleeplummerjr]

Try this:

<script>
  $.sheet.preLoad('../');
  $(function(){
    $('#sheetParent').sheet({
      minSize: {rows: 10, cols: 10}
    });
  });
</script>
<div id="sheetParent"><table /></div>

Then when you need to get xml or json:

$.sheet.dts.fromTables.json($('#sheetParent').getSheet());