grijq

Simple knockout.js integration

See the code

// Create the songs list
var songs = [
  {name: 'Code Monkey', dur: '3:10', album: 'Thing a Week Three'},
  {name: 'Ikea', dur: '3:05', album: 'Smoking Monkey'},
  {name: 'I Feel Fantastic', dur: '3:06', album: 'Our Bodies, Ourselves, Our Cybernetic Arms'},
  {name: 'Mandelbrot Set', dur: '4:22', album: 'Where Tradition Meets Tomorrow'}
];

// Create the grid and on the
// edit complete, write the value
// back to the model. On new row,
// add a new song to the list and,
// after a moment, select the last
// row which is the new item.
$('#inline-data').grijq({
  height: 300,
  hasDivs: true,
  editcomplete: function(e, data) {
    var prop = data.cell.kobind();
    var index = data.cell.parent().prevAll().length;
    viewmodel.songs()[index][prop](data.val);
  },
  newrow: function() {
    viewmodel.songs.push({
      name: ko.observable(' '),
      dur: ko.observable(' '),
      album: ko.observable(' ')
    });
    setTimeout(function() {
      $('#inline-data').grijq('selectLastRow');
    }, 0);
  }
});

I sure do like Jonathan Coulton. It'd be nice to maintain a little list of his songs. Oh, look! There's one, now! Seems the list of songs gets kept in a nice JavaScript array and knockout.js uses that to draw the actual HTML that the grijq uses for interactivity. This example allows new rows. Just TAB to the end of the table and TAB again. New row!

Song Length Album