3

行内にHTMLをレンダリングできるAPIまたは何かがありますか? 単純な html をバインドできますが、HTML は動的であり、いくつかの角度ディレクティブが含まれているため、その HTML を ag-grid でレンダリングするにはどうすればよいですか。

4

5 に答える 5

2

次の古いソリューションは、ag-grid < 4 で機能します。

グリッド オプションでプロパティangularCompileRowsを true に設定します。

これにより、行の角度コンパイルが有効になります。

グリッド オプション プロパティ: https://www.ag-grid.com/javascript-grid-properties/index.php

angularCompileRows の使用例は、https ://www.ag-grid.com/angular-grid-cell-template/index.php にあります。

ただし、angularCompileRows を有効にするとグリッドが遅くなることに注意してください。膨大な量のデータがあり、inifite スクロールを使用する場合、ネイティブ イベント バインディングを使用してネイティブ DOM 要素を返すために cellRenderer を使用し、$scope.$apply() を使用して angular と再同期することをお勧めします。

*その他のバージョンの場合:*

Angular を使用して、セル レンダラー、セル エディター、およびフィルターを構築することができます。これらのそれぞれの実行については、それぞれのセクションで説明されています。

ag-Grid のカスタマイズに Angular を使用することは可能ですが、必須ではありません。グリッドは、Angular 部分と非 Angular 部分 (Angular または通常の JavaScript の cellRenderer など) の両方で問題なく機能します。https://www.ag-grid.com/angular-more-details/から

于 2016-03-09T08:18:21.990 に答える
1

以下に示すように、CellRenderer 関数を使用して、各セルのカスタム HTML テンプレートを作成できます。ツールチップの下にリンクがあり、innerHTML を使用したアンカー タグの href を表示したくありませんでした。

{
      //field: 'TOOL_TIP',
      headerName: 'Tooltip',
      filter: 'agTextColumnFilter',
      cellRenderer: params => {
        var a = document.createElement('div');
        a.innerHTML = params.data.TOOL_TIP;
        return a;
      },
      tooltip: (params) => '' + params.value
    }
于 2020-03-18T09:19:00.947 に答える