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
On Monday, June 22, 2015 at 3:25:42 PM UTC+8, Vincent Yeh wrote:
>
> 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
>
> On Monday, June 22, 2015 at 3:12:42 PM UTC+8, Vincent Yeh wrote:
>
> 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,
>
> ...
--
You received this message because you are subscribed to the Google Groups
"TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/tiddlywikidev.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywikidev/43a6d4f7-c42c-4748-ab9a-74680cd2a889%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
