グリッド：CellMakerを使用したハイパーリンク列

FlexGridではハイパーリンク列を簡単に追加できます。FlexGridのColumnクラスのcellTemplateプロパティを使用すると、開発者はテンプレートリテラルを使用してセルのカスタムコンテンツを定義でき、柔軟性が大幅に向上します。

さらに、CellMakerクラスを使用すると、HTMLを記述することなくボタンやハイパーリンクなどの一般的な単純なセルを作成することができます。

CellMakerを使用してハイパーリンク列をFlexGridに追加する方法を見てみましょう。ハイパーリンク列を作成するには、CellMakerクラスを次のように使用します。

import { FlexGrid, ICellTemplateContext } from '@mescius/wijmo.grid';
import { CellMaker } from '@mescius/wijmo.grid.cellmaker';

let theGrid = new FlexGrid('#theGrid', {
    showMarquee: true,
    autoGenerateColumns: false,
    columns: [
        // カスタムテキストとバインドされたhrefを持つリンク
        {
            header: 'ハイパーリンク',
            binding: 'country',
            cellTemplate: CellMaker.makeLink({
                text: '<b>${item.country}</b>',
                href: '${item.url}',
                attributes: {
                    target: '_blank',
                    rel: 'noopener noreferrer',
                    tabIndex: -1
                }
                // クリックハンドラーは必要なく、リンクは自動的に動作します
            })
        }
    ]
});

このコードでは、列のcellTemplateプロパティをCellMakerのmakeLinkメソッドによって提供されるICellTemplateFunctionに設定します。

makeLinkメソッドのオプション引数を使用すると、リンクのカスタムテキスト、リンクターゲットを指定するhref、およびリンクの属性を提供できます。また、クリックイベントのハンドラーを指定することもできます。

結果は次のようになります。