2016-05-07 72 views
0

我使用最新版本0.24.3,但仍然陷入了這個問題。每次表格渲染時,第一行總是未對齊,並隱藏在標題下。Handsontable firstrow錯位

enter image description here

這裏是我到目前爲止的代碼。

$scope.populateTable = function(data){ 
 
     var container = document.getElementById('priceSettingContent'); 
 
     $scope.hotPricing = new Handsontable(container, { 
 
      data: data , 
 
      rowHeaders: false, 
 
      colHeaders: ['Article Number','Color','Size','EAN', 'Local Distribution Channel','Published Selling Price', 
 
        'Suggested Retail Price','Purchase Cost','Currency','Last Update'], 
 
      columnSorting: false, 
 
      contextMenu: false, 
 
      columns: [ 
 
        { 
 
         data: 'articleNumber', 
 
         readOnly: true, 
 
         disableVisualSelection: true 
 
        }, 
 
        { 
 
         data: 'colorCode', 
 
         readOnly: true, 
 
         disableVisualSelection: true 
 
        }, 
 
        { 
 
         data: 'size', 
 
         readOnly: true, 
 
         disableVisualSelection: true 
 
        }, 
 
        { 
 
         data: 'ean',readOnly: 
 
         true, disableVisualSelection: true 
 
        }, 
 
        { 
 
         data: 'distList', 
 
         readOnly: true, 
 
         disableVisualSelection: true 
 
        }, 
 
        { 
 
         data: 'publishedSellingPrice', 
 
         type: 'numeric', 
 
         format: '0,0.00', 
 
         language: 'en', 
 
         validator: $scope.currencyValidator, 
 
         allowInvalid: false, 
 
        }, 
 
        { 
 
         data: 'suggestedRetailPrice', 
 
         type: 'numeric', 
 
         format: '0,0.00', 
 
         language: 'en', 
 
         validator: $scope.currencyValidator, 
 
         allowInvalid: false 
 
        }, 
 
        { 
 
         data: 'purchaseCost', 
 
         type: 'numeric', 
 
         format: '0,0.00', 
 
         language: 'en', 
 
         validator: $scope.currencyValidator, 
 
         allowInvalid: false 
 
        }, 
 
        { 
 
         data: 'currencyCode', 
 
         readOnly: true, 
 
         disableVisualSelection: true 
 
        }, 
 
        { 
 
         data: 'dateModified', 
 
         readOnly: true, 
 
         disableVisualSelection: true 
 
        }, 
 
     ] 
 
      renderAllRows: true, 
 
      height: function(){ 
 
       return 400; 
 
      }, 
 
      stretchH: 'all', 
 
      afterChange: function(change, source){ \t 
 
       if(source != 'loadData'){ 
 
        $scope.extractData(change); 
 
       } 
 
      }, 
 
      afterCreateRow: function(index, amount){ 
 
       data.splice(index, amount) 
 
      }, 
 
      tableClassName: ['table-hover', 'table-striped','table-responsive'], 
 
      manualColumnResize: true, 
 
      cells: function(row, col, prop) { 
 
       var cellProperties = {}; 
 
       if (row === 0, col === 0) { 
 
        cellProperties.renderer = $scope.articleNameRenderer; 
 
       } 
 
       return cellProperties; 
 
      } 
 
     }); 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

這一切發生的每一次表渲染。

+0

Hi @Tushar,我已經添加了生成表格的代碼 – Makubex

回答

0

它現在正在工作,經過在css上的調試和跟蹤,我終於找到了罪魁禍首。我不知道它是否是最好的方式,但我希望那些遇到同樣問題的人可以申請這個。打開handontable的css文件並編輯這部分並添加最大高度。

.ht_clone_top .wtHolder, 
 
.ht_clone_bottom .wtHolder { 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
    max-height: 35px; /* add max height */ 
 
}

就是這樣!