双手少尉未对准

时间:2016-05-07 13:01:09

标签: javascript css handsontable

我使用的是0.24.3的最新版本,但仍然遇到了这个问题。每次表格渲染时,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){	
                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>

每次表格渲染都会发生这种情况。

1 个答案:

答案 0 :(得分:0)

它现在正在工作,在调试和跟踪css之后我终于找到了罪魁祸首。我不知道它是否是最好的方法,但我希望那些遇到同样问题的人可以申请这个。打开handontable的css文件并编辑此部分并添加max-height。

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

就是这样!