2016-11-04 8 views
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クラスは変更されていません。

+0

ありがとうございましたwidthとheightについて語るag-gridの-width-and-height/index.php)。 –

+0

これまでに持っていたもののコードスニペットを含めてください。 –

+0

ヘッダーはデフォルトで一番上にとどまるべきです - 実際には画面からスクロールする唯一の方法は、データだけでなくページ全体をスクロールすることですグリッド内。ここの他の人が言っているように、おそらく例を提供する必要があります –

答えて

0

解決済み:divにheight属性を追加する必要がありました。

はまた、この[セクション](https://www.ag-grid.com/javascript-gridをご覧ください...あなた私たちが助けるためにあなたのコードを参照する必要があるとしているすべての

関連する問題