web-dev-qa-db-ja.com

マスター/詳細コンポーネントでAgグリッドセットの自動高さ

Ag-gridコンポーネントの自動高さを設定する必要があると仮定します。これは、gridOptionsをdomLayout="autoHeight"に設定することで簡単に行うことができます。これは単一のコンポーネントで機能しますが、高さを拡張できるマスター/詳細（親/子）コンポーネントの場合、これは機能しません。

同じ問題： https://github.com/ag-grid/ag-grid/issues/205

私はそのCSSを深く調整する必要がありますが、それでもそれを機能させることはできません、

enter image description here

スタイルリファレンス： https://www.ag-grid.com/javascript-grid-styling/

AgグリッドDOMレイアウト： https://www.ag-grid.com/javascript-grid-width-and-height/#gsc.tab=

再現例： https://github.com/ag-grid/ag-grid-vue-example （マスター/詳細を参照）

gridOptions getRowheightまたはその埋め込みcssを微調整しています

関連するcssの場合：

.ag-root {
/* set to relative, so absolute popups appear relative to this */
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
/* was getting some 'should be there' scrolls, this sorts it out */
  overflow: hidden;
}

.ag-body {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

https://github.com/ag-grid/ag-grid/blob/master/dist/styles/ag-grid.css

と中のプランカー：

https://www.ag-grid.com/javascript-grid-master-detail/#gsc.tab=

著者からの別の手がかり： https://www.ag-grid.com/javascript-grid-row-height/index.php#gsc.tab=

ピン留めされた行の高さピン留めされた行の行の高さは、通常の行とまったく同じように機能しますが、1つの違いがあります。一度設定すると、高さを動的に変更することはできません。ただし、これは、固定された行データを再度設定して行の高さをリセットするだけで簡単に回避できます。データを再設定しても、データがリセットされた場合の通常の行のように、スクロール位置、フィルタリング、並べ替え、またはグループの開閉位置に影響を与えないため、固定された行では問題になりません。

javascriptcsshtml-tablevuejs2ag-grid
11
Ardhi

行の高さを動的に計算できます。

getRowHeight: function (params) {
    if (params.node && params.node.detail) {
        var offset = 80;
        var allDetailRowHeight = params.data.callRecords.length * 28;
        return allDetailRowHeight + offset;
    } else {
        // otherwise return fixed master row height
        return 60;
    }
}

これは 例 ag-gridの公式ドキュメントにあります。

3
Roman Skydan