0
ag-grid divをスクロールしているときにdivの上にテーブルヘッダーを置くことができません。これを取得するために使用する特定のクラスがありますか?ag-grid:スクロール中にヘッダーを一番上に置く
おかげ
EDIT:
HTML::
<md-tab ng-repeat="tab in mbpTabs">
<md-tab-label>{{tab.title}}</md-tab-label>
<md-tab-body>
<div ag-grid="tab.mbpTable.table" class="ag-dark ag-scrolls"></div>
</md-tab-body>
</md-tab>
JSグリッドの定義は、以下:
this.cols = [{headerName: "Security",marryChildren: true,
children: [{headerName: "CTRL", field: this.FIELD_KEY_CTRL,hide: true,cellRenderer: MbpTable.prototype.ctrlRenderer.bind(this)},
{headerName: "Id", field: this.FIELD_KEY_ID,width: 0,hide: true},
{headerName: "Issuer", field: this.FIELD_KEY_ISSUER,width: 100},
{headerName: "Cusip", field: this.FIELD_KEY_CUSIP,width: 80,},
{headerName: "Board Label", field: this.FIELD_KEY_BOARD_LABEL,width: 150}]
},
{headerName: 'Best',marryChildren: true,
children: [{headerName: "Bid Size", field: this.FIELD_KEY_BEST_BID_SIZE, width: 125,cellClass:"mbp-ag-cell-best-bid",cellRenderer: MbpTable.prototype.szPriceRenderer.bind(this)},
{headerName: "Bid Price", field: this.FIELD_KEY_BEST_BID_PRICE, width: 125,cellClass:"mbp-ag-cell-best-bid",cellRenderer: MbpTable.prototype.szPriceRenderer.bind(this)},
{headerName: "Ask Price", field: this.FIELD_KEY_BEST_ASK_PRICE, width: 125,cellClass:"mbp-ag-cell-best-ask",cellRenderer: MbpTable.prototype.szPriceRenderer.bind(this)},
{headerName: "Ask Size", field: this.FIELD_KEY_BEST_ASK_SIZE, width: 125,cellClass:"mbp-ag-cell-best-ask",cellRenderer: MbpTable.prototype.szPriceRenderer.bind(this)}]
},
{headerName: this.headerMyOrder,marryChildren: true,
children: [{headerName: "Bid Size", field: this.FIELD_KEY_ORDER_BID_SIZE, width: 80,cellClass:"mbp-ag-cell-order",editable: true,cellRenderer: MbpTable.prototype.bidOrderRenderer.bind(this),cellEditor: "text",newValueHandler: MbpTable.prototype.sizeValueHandler.bind(this)},
{headerName: "Bid Price", field: this.FIELD_KEY_ORDER_BID_PRICE, width: 80,cellClass:"mbp-ag-cell-order",editable: true,cellRenderer: MbpTable.prototype.bidOrderRenderer.bind(this),cellEditor: "text",newValueHandler: MbpTable.prototype.priceValueHandler.bind(this)},//cellEditor: NumericCellEditor},
{headerName: "",headerCellTemplate:this.headerMyBidOrder, field: this.FIELD_KEY_ORDER_BID_ACTION,minWidth:18,maxWidth:18,width:18,cellClass:["mbp-ag-cell-order","mbp-ag-cell-order-action"],cellRenderer: MbpTable.prototype.bidOrderRenderer.bind(this)},
{headerName: "Ask Price", field: this.FIELD_KEY_ORDER_ASK_PRICE, width: 80,cellClass:"mbp-ag-cell-order",editable: true,cellRenderer: MbpTable.prototype.askOrderRenderer.bind(this),cellEditor: "text",newValueHandler: MbpTable.prototype.priceValueHandler.bind(this)},//cellEditor: NumericCellEditor},
{headerName: "Ask Size", field: this.FIELD_KEY_ORDER_ASK_SIZE, width: 80,cellClass:"mbp-ag-cell-order",editable: true,cellRenderer: MbpTable.prototype.askOrderRenderer.bind(this),cellEditor: "text",newValueHandler: MbpTable.prototype.sizeValueHandler.bind(this)},
{headerName: "",headerCellTemplate:this.headerMyAskOrder, field: this.FIELD_KEY_ORDER_ASK_ACTION,minWidth:18,maxWidth:18,width:18,cellClass:["mbp-ag-cell-order","mbp-ag-cell-order-action"],cellRenderer: MbpTable.prototype.askOrderRenderer.bind(this)}]}];
this.table={
columnDefs: this.cols,
rowData: MbpTable.prototype.createRndRows(numRows,offset,this),
rowSelection: 'multiple',
enableColResize: true,
enableSorting: true,
enableFilter: true,
groupHeaders: true,
...
};
は、私は省略folloコードがある
ビジネス上の理由からテーブル定義のウィングオプション
CSSのag-headerクラスは変更されていません。
ありがとうございましたwidthとheightについて語るag-gridの-width-and-height/index.php)。 –
これまでに持っていたもののコードスニペットを含めてください。 –
ヘッダーはデフォルトで一番上にとどまるべきです - 実際には画面からスクロールする唯一の方法は、データだけでなくページ全体をスクロールすることですグリッド内。ここの他の人が言っているように、おそらく例を提供する必要があります –