5.20202.724
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 + ' **')
                    }
                })
            }
        ]
    });

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

    引数

    戻り値 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

静的 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}', // バインドされたテキストをオーバーライドします。
                    href: '${item.url}', // バインドされたリンク先。
                    // リンクは自動的に移動するため、クリックハンドラーは必要ありません。
                })
            }
        ]
    });

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

    引数

    • オプション options: ILinkOptions

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

    戻り値 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

静的 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