5.20213.824
wijmo.grid.cellmaker Class CellMaker Wijmo API クラス

CellMaker クラス

ボタン、ハイパーリンク、画像、評価、スパークラインなどのカスタムコンテンツを含むセルを作成するためのメソッドを提供します。

これらのメソッドを使用するには、その結果を列のColumn.cellTemplateプロパティに割り当てます。

階層

  • CellMaker

メソッド

静的 makeButton

  • ボタン付きのセルテンプレートを作成します。

    デフォルトでは、ボタンにはセルのバインドされたテキストが表示されます。 固定文字列を表示する場合は、options.textプロパティを使用します。

    たとえば、次のコードはボタン要素を持つ列を定義します。 すべてのボタンに同じテキスト('Click Me') が表示され、クリックするとアラートが表示されます。

    new FlexGrid('#theGrid', {
        autoGenerateColumns: false,
        columns: [
            { binding: 'id', header: 'ID', isReadOnly: true },
            {
                binding: 'country',
                header: 'My Buttons',
                cellTemplate: CellMaker.makeButton({
                    text: 'Click Me', // バインドされたテキストをオーバーライドします。
                    click: (e: MouseEvent, ctx: ICellTemplateContext) => {
                        alert('Clicked Button ** ' + ctx.item.country + ' **')
                    }
                })
            }
        ]
    });

    通常のタブによるナビゲーションの中断を回避するために、ボタンのtabindex属性はデフォルトで-1に設定されています。

    タブナビゲーションにボタンを含める場合は、 attributesオプションを使用して、 ボタンのtabindex属性をゼロに設定します。 例えば:

    new FlexGrid('#theGrid', {
        autoGenerateColumns: false,
        columns: [
            { binding: 'id', header: 'ID', isReadOnly: true },
            {
                binding: 'country',
                header: 'My Buttons',
                cellTemplate: CellMaker.makeButton({
                    text: 'Click Me', // バインドされたテキストを上書きします。
                    click: (e: MouseEvent, ctx: ICellTemplateContext) => {
                        alert('Clicked Button ** ' + ctx.item.country + ' **')
                    },
                    attributes: {
                        tabindex: 0 // ボタンをタブストップにします。
                    }
                })
            }
        ]
    });

    リンクとボタン要素の詳細については、次のリンクを参照してください。 https://css-tricks.com/a-complete-guide-to-links-and-buttons/

    引数

    戻り値 ICellTemplateFunction

    列のColumn.cellTemplateプロパティに割り当てられるICellTemplateFunction

静的 makeImage

  • 画像を持つセルテンプレートを作成します。

    セルは、画像のURLを含む文字列にバインドする必要があります。 たとえば、次のコードは、データ項目の「img」メンバーによって指定されたURLにある画像を含む列を定義します。

    new FlexGrid('#theGrid', {
        autoGenerateColumns: false,
        columns: [
            { binding: 'id', header: 'ID', isReadOnly: true },
            {
                binding: 'img',
                header: 'Images',
                cssClass: 'cell-img',
                cellTemplate: CellMaker.makeImage({
                    label: 'image for ${item.country}', // アクセシビリティ。
                    click: (e, ctx) => alert('Clicked image for ' + ctx.item.country)
                })
            }
        ]
    });

    引数

    • オプション options: ICellMakerOptions

      画像のパラメータを含むICellMakerOptionsオブジェクト。 labelプロパティを含める必要があります。

    戻り値 ICellTemplateFunction

    列のColumn.cellTemplateプロパティに割り当てられるICellTemplateFunction

静的 makeLink

  • ハイパーリンクを持つセルテンプレートを作成します。

    デフォルトでは、リンクにはセルのバインドされたテキストが表示されます。 固定文字列を表示する場合は、options.textプロパティを表示する文字列に設定します。

    たとえば、以下のコードは、 ハイパーリンク要素を持つ列を定義します。 リンクには、いくつかのカスタムテキストと、 セルのデータ項目からのURLへのリンクが表示されます。

    new FlexGrid('#theGrid', {
        autoGenerateColumns: false,
        columns: [
            { binding: 'id', header: 'ID', isReadOnly: true },
            {
                binding: 'country',
                header: 'My Links',
                cellTemplate: CellMaker.makeLink({
                    text: 'Visit ${item.country}', // override bound text
                    href: '${item.url}', // バインドされたリンクの宛先
                    attributes: {
                        tabindex: 0 // ハイパーリンクをタブストップにする
                    }
                })
            }
        ]
    });

    通常のタブによるナビゲーションの中断を回避するために、ハイパーリンクのtabindex属性はデフォルトで-1に設定されています。

    タブナビゲーションにハイパーリンクを含める場合は、 attributesオプションを使用して、 tabindex属性をゼロに設定します。 例えば:

    new FlexGrid('#theGrid', {
        autoGenerateColumns: false,
        columns: [
            { binding: 'id', header: 'ID', isReadOnly: true },
            {
                binding: 'country',
                header: 'My Links',
                cellTemplate: CellMaker.makeLink({
                    text: 'Visit ${item.country}', // override bound text
                    href: '${item.url}', // バインドされたリンクの宛先
                    // クリックハンドラーの必要はなく、リンクは自動的にナビゲートします
                })
            }
        ]
    });

    リンクとボタン要素の詳細については、「https://css-tricks.com/a-complete-guide-to-links-and-buttons/」 を参考してください。

    引数

    • オプション options: ILinkOptions

      ハイパーリンクのパラメータを含むILinkOptionsオブジェクト。

    戻り値 ICellTemplateFunction

    列のColumn.cellTemplateプロパティに割り当てられるICellTemplateFunction

静的 makeRating

  • 評価の値を表示および編集するセルテンプレートを作成します。

    セルは、評価を表す数値を含む文字列にバインドする必要があります。

    デフォルトでは、セルには評価が星で表示されます。CSSを使用して、評価のセルの外観をカスタマイズできます。

    たとえば、次のコードは、データ項目の「rating」メンバーを示す星の列を定義します。 列は読み取り専用ではないため、ユーザーはキーボードまたはマウスを使用して評価を編集できます

    new FlexGrid('#theGrid', {
        autoGenerateColumns: false,
        columns: [
            { binding: 'id', header: 'ID', isReadOnly: true },
            {
                binding: 'rating',
                header: 'Rating (editable)',
                width: 220,
                align: 'center',
                cellTemplate: CellMaker.makeRating({
                    range: [0, 5], // 0〜5の評価の値。
                    label: 'Edit Product Rating'
                })
           }
        ]
    });

    引数

    戻り値 ICellTemplateFunction

    列のColumn.cellTemplateプロパティに割り当てられるICellTemplateFunction

静的 makeSparkline

  • スパークラインを持つセルテンプレートを作成します。

    セルは、ミニ折れ線チャートとして表示される配列の数にバインドする必要があります。

    たとえば、次のコードは、セルのデータ項目「history」配列の内容を示すスパークラインを持つ列を定義します。 CSSを使用してスパークラインの外観をカスタマイズできます。

    new FlexGrid('#theGrid', {
        autoGenerateColumns: false,
        columns: [
            { binding: 'id', header: 'ID', isReadOnly: true },
            {
                binding: 'history',
                header: 'History Sparklines',
                width: 175,
                cellTemplate: CellMaker.makeSparkline({
                    markers: SparklineMarkers.High | SparklineMarkers.Low, // マーカーを追加します。
                    maxPoints: 25, //ポイント数の制限。
                    label: '${item.country} sales history line chart', // アクセシビリティ
                })
            }
        ]
    });

    引数

    • オプション options: ISparkLineOptions

      スパークラインのパラメータを含むISparkLineOptionsオブジェクト。 labelプロパティを含める必要があります。

    戻り値 ICellTemplateFunction

    列のColumn.cellTemplateプロパティに割り当てられるICellTemplateFunction