Handsontable セルに配置するリンク

ボタンを配置するときと同様に、HtmlRenderer を使うのだが。。。
グリッドデータJSON に、URLを持って表示させる場合は、renderer の指定に、"html" を指定する。
で良かった。

var data = [
   { link:'<a href="http://google.co.jp">google</a>' }
];
var hot = new Handsontable(document.getElementById("table"), {
   data: data,
   columns:[
      {  data:'link',
         readOnly: true,
         renderer: 'html',
      },
   // 省略

しかし、編集可能な表で、動的にリンクの行の他のセルの値をURLパラメータにする場合は、
renderer の指定は、グリッド描画時に、URLを書き直す必要があり、以下のようにする。

var hot = new Handsontable(document.getElementById("table"), {
   data: data,
   columns:[
      {  data:'link',
         readOnly: true,
         renderer: function(instance, td, row, col, prop, value, cellProperties) {
            Handsontable.renderers.HtmlRenderer.apply(this, arguments);
            // 列先頭の値をリンクパラメータに付与
            var colvalue = instance.getData(row, 0)[0][0];
            $(td).empty().append('<a href="/targetPage?row=' + row
                                              + '&col_0_value=' + colvalue 
                                              +  '">' + value + '</a>');
         },
      },
   // 省略

このURLパラメータで指定するセルの値も、
編集した後に再度この renderer の function() が実行されて、instance より、
instance.getData(row, column) で取得する２次元配列でパラメータとして
付与したい値を取得して、リンクを描画するのである。

あるいは、以下の方が正しい方法かもしれない。

var hot = new Handsontable(document.getElementById("table"), {
   data: data,
   columns:[
      {  data:'link',
         readOnly: true,
         renderer: function(instance, td, row, col, prop, value, cellProperties) {
            var colvalue = instance.getData(row, 0)[0][0];
            var linkValue = '<a href="/targetPage?row=' + row + '&col_0_value=' + colvalue +  '">' + value + '</a>';
            Handsontable.renderers.HtmlRenderer.apply(this, [instance, td, row, col, prop, linkValue, cellProperties]);
         },
      },
   // 省略