TWC Saving updates to table created using Handsontable JQuery Plugin

[goodm...@gmail.com]

Hello all!

I've been looking for a solution to provide inline editing of tables within my tw and I've discovered the Handsontable JQuery plugin.

This provides a minimalist solution for HTML & Java which runs great, looks great and has lots of neat expansion plugins.

I've put the source code in a systemConfig tidder and got it up and running in my tiddlywiki using the inline javascript plugin to call a handsontable within a tiddler. However, the problem I now face is saving the changes once they have been made to the table. Currently the table data is defined within the table tiddler as:

var myData = [
    ["", "eg1", "eg2", "eg3", "eg4"],
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
    ];

In view mode when changes to the table are made this data doesn't change.

Could someone please suggest a solution to using Handsontable within a tiddlywiki and ensuring changes are saved to the tiddler after use?

Many Thanks

Nick

[Ton Gerner]

Hi Nick,

You have seen https://groups.google.com/d/msg/tiddlywiki/0FT6iBneYOk/O1egwKtpyxcJ?

Cheers,

Ton

[goodm...@gmail.com]

Ton

Thanks for your reply. I've experimented with the tw ted inline editor for tiddlywiki tables but didn't find it as tidy as the the handsontable editor. Are you suggesting using this approach or that the twted plugin could be used to enable the handsontable editor making changes in view mode?

Thanks again for your quick reply

Nick

[Ton Gerner]

Hi Nick,

I did not know if you had seen Vincent's editor and must say I do not know the Handsontable JQuery plugin.
So with the Handsontable JQuery plugin I cannot help you.

If I remember correctly Vincent Yeh started his editor as a table editor in 2012 [1]
Lateron other "editable" parts were added and even a calculation possibility.

At that time I was only interested in the table editing possibilities and that is why I am using an 'old' version (TWted & TWtable v1.4.6, resp. 37 & 31 KB) in my 'TiddlySnip' TW classic.
There are some quirks with this old version, but I can live with that ;-)

I understand Vincent will soon make a version for TW5.

Cheers,

Ton

[1] https://groups.google.com/d/msg/tiddlywiki/wnVpyWfjFtw/JLDE-EXT7X4J

[Vincent Yeh]

Hi Nick,

It's pity that I did not see this post until today and did not know about the Handsontable. I would love to use Handsontable myself, too!

As to your problem, their webpage says the Handsontable binds a table to some data source that you provide, and the data you provide is changed as you change the table. That means your data in computer memory was actually changed. What you are missing is only one thing: to set the modified data back to the tiddler text, before saving the tiddler. I think its worth making a plugin for that!

Ton, thanks a lot for introducing my works! I am still struggling to understand the TW5 plugin mechanism...

Have fun!
Vincent

[Vincent Yeh]

Hi Nick,

I have written a quick solution for your case. It should work for simple cases like yours, but is expected to fail for more complicated ones. Anyways, you may want to give it a try.

The only thing you need to do is to give it a callback function as follows:

  afterChange: function(change,source){
    if ( source == 'loadData' ) return;
    // Find the tiddler containing this table.
    var tiddler = store.getTiddler(
        story.findContainingTiddler(hot.container).getAttribute("tiddler")
    );
    // Get the tiddler text.
    var text = tiddler.text;
    // Find the start and end of table data.
    // First, we find the variable name for the table data, assuming it exists.
    var p1 = text.indexOf('Handsontable');
    p1 = text.indexOf('data',p1);
    p1 = text.indexOf(':',p1);
    var p2 = text.indexOf(',',p1);
    var dataname = text.substring(p1+1,p2).trim();
    // Then we look for the beginning of data definition,
    p1 = text.indexOf('var');
    p1 = text.indexOf(dataname,p1+1)+dataname.length;
    // and the end of data definition.
    p2 = text.indexOf('];',p1)+2;
    // Convert the modified data into the defining string.
    var data = hot.getData();
    var txtdata = ' = [\n';
    for ( var r=0, rlen=data.length-hot.getSettings().minSpareRows; r<rlen; r++ ){
        txtdata += '[';
        for ( var c=0,clen=data[r].length; c<clen; c++ ){
            var wrap = typeof data[r][c] == 'string' ? '"' : '';
            txtdata += wrap+data[r][c]+wrap+(c<clen-1?', ':'');
        }
        txtdata +=']' + (r<rlen-1?',':'') + '\n';
    }
    txtdata += '];'
    // Replace the original definition string with the modified one.
    text = text.substring(0,p1)+txtdata+text.substring(p2);
    // Set it back to the tiddler,
    tiddler.set(
        tiddler.title,text,tiddler.modifier,new Date()
    );
    // and mark it as modified.
    store.setDirty(true);
  }

Once you assign this function to the afterChange property of the options upon calling the new Handsontable()
constructor, each time you change the content of a cell the wiki text in that tiddler is changed accordingly.

Again this quick solution only works for simple cases. Much more work is needed for complicated ones.

Have fun!
Vincent

[Vincent Yeh]

Well, I just found out the previous version uses the variable name hot to refer to the table in the callback function, which might not work for you because you are likely to have a different variable name for your table. A better solution is to use this to refer to the table that has just been changed. This is the better version.

  afterChange: function(change,source){
    if ( source == 'loadData' ) return;
    // Find the tiddler containing this table.
    var tiddler = store.getTiddler(

        story.findContainingTiddler(this.container).getAttribute("tiddler")

    );
    // Get the tiddler text.
    var text = tiddler.text;
    // Find the start and end of table data.
    // First, we find the variable name for the table data, assuming it exists.
    var p1 = text.indexOf('Handsontable');
    p1 = text.indexOf('data',p1);
    p1 = text.indexOf(':',p1);
    var p2 = text.indexOf(',',p1);
    var dataname = text.substring(p1+1,p2).trim();
    // Then we look for the beginning of data definition,
    p1 = text.indexOf('var');
    p1 = text.indexOf(dataname,p1+1)+dataname.length;
    // and the end of data definition.
    p2 = text.indexOf('];',p1)+2;
    // Convert the modified data into the defining string.

    var data = this.getData();

    var txtdata = ' = [\n';

    for ( var r=0, rlen=data.length-this.getSettings().minSpareRows; r<rlen; r++ ){

        txtdata += '[';
        for ( var c=0,clen=data[r].length; c<clen; c++ ){
            var wrap = typeof data[r][c] == 'string' ? '"' : '';
            txtdata += wrap+data[r][c]+wrap+(c<clen-1?', ':'');
        }
        txtdata +=']' + (r<rlen-1?',':'') + '\n';
    }
    txtdata += '];'
    // Replace the original definition string with the modified one.
    text = text.substring(0,p1)+txtdata+text.substring(p2);
    // Set it back to the tiddler,
    tiddler.set(
        tiddler.title,text,tiddler.modifier,new Date()
    );
    // and mark it as modified.
    store.setDirty(true);
  }

Have fun!
Vincent

[Vincent Yeh]

Nick and everyone interested in Handsontable,

Last night I've made a TiddlyWiki Classic plugin for Handsontable, which should be a lot easier to use. The plugin can be downloaded at http://twve.tiddlyspot.com/#HandsontablePlugin.

• Installation is the same as any of the TWC plugins.
• Works with or without a locally installed copy of Handsontable
• If local copy is installed, this plugin makes use of it.
  
• If local copy is NOT installed, this plugin simply fetches the on-line version (http://handsontable.com/dist/handsontable.full.min.js) and its corresponding stylesheet (http://handsontable.com/dist/handsontable.full.min.css).
  
• Works with multiple tables in one tiddler, provided each of the corresponding data sets is given a unique variable name.
  
• For now it is only tested with extremely simple cases, not sure how it works with complicated ones. You are very welcome to give it a try and send me bug reports, comments, and suggestions. :-)
  

The way to use it is straightforward: Simply add the following line to the options when creating the table,

afterChange: config.extensions.Handsontable.afterChange

and you are good to enjoy the nice features of Handsontable.

Have fun!
Vincent

...

[Yakov]

Hey guys,

it's 3 year later but just in case you are interested in such a tool, there's a release of the new HandsontablePlugin [1] which saves stuff back to a tiddler and even can work with sets of tiddlers as a "database": a row per tiddler, a column per container – title, section, slice, field or text (the "database" option is not yet documented, though).

Best regards,
Yakov.

[1] https://groups.google.com/forum/#!topic/tiddlywikiclassic/sv1Lu2zs0P0

понедельник, 22 декабря 2014 г., 12:00:22 UTC+3 пользователь goodm...@gmail.com написал: