表头自适应高度

我在列上设置了wordWrap=true; 内容的确自动换行了，但是高度却没变

给力~！

KevinChen 发表于 2020-7-3 08:47
设置一个最大高度是个好办法，粘贴的代码中空格被转义了，我整理了一下：

我解决了，

1. .wj-flexgrid .wj-marquee {
   
2.           transition: all .4s;
   
3.           transition-timing-function: cubic-bezier(.5,0,.5,1)
   
4.         }

复制代码

对于css没必要用到那么多的class,这样就好了

18504510726 发表于 2020-7-2 17:56
    $scope.itemsSourceChanged = function(s, e) {
        se ...

设置一个最大高度是个好办法，粘贴的代码中空格被转义了，我整理了一下：

1. $scope.itemsSourceChanged = function(s, e) {
   
2.         setTimeout(function() {
   
3.                 var row = s.columnHeaders.rows[0];
   
4.                 row.wordWrap = true;
   
5.                 s.autoSizeRow(0, true);
   
6. 
   
7.                 if (row.height > 100) {
   
8.                         row.height = 100;
   
9.                 }
   
10.         });
    
11. }

复制代码

    $scope.itemsSourceChanged = function(s, e) {
        setTimeout(function() {
            
            // enable wrapping on first header row
            var row = s.columnHeaders.rows[0];
            row.wordWrap = true;

            // autosize first header row
            s.autoSizeRow(0, true);
            
            // limit height to 100px
            //if (row.height > 100) {
            //    row.height = 100;
            //}
        });
    }

暂时确实没什么好办法，动画效果与autoSizeRow的行高计算在逻辑上有冲突，

这里：



white-space如果删除或者不换行，就不会出现行高计算错误的问题。

KevinChen 发表于 2020-6-24 18:43
你好，经调研，自适应行高的实现与动画效果有冲突，的确无法正常整合，建议这里取舍一下~

   这里没有办法补救吗

你好，经调研，自适应行高的实现与动画效果有冲突，的确无法正常整合，建议这里取舍一下~

KevinChen 发表于 2020-6-23 17:47
您好，这个问题需要一些时间来分析，预计明天上午给您反馈。

你好，还记得吗

您好，这个问题需要一些时间来分析，预计明天上午给您反馈。

KevinChen 发表于 2020-6-23 16:36
你好，经调研，造成列头变高的原因不是由于动画效果影响的，建议您再排查一下这个问题的原因，猜测可能是由 ...

你好，并不是其他的问题，我在你们的页面上进行调试的，仅仅修改了以下几个地方，是基于你上次发我的链接上修改的

1. <style>
   
2.        .wj-flexgrid .wj-marquee, .wj-flexgrid .wj-header, .wj-flexgrid .wj-cell {
   
3.     text-align: right;
   
4.     transition: all 0.4s;
   
5. }
   
6. 
   
7.     </style>

复制代码

1. var autoFitColumnHeaderWidth = function(s,e){
   
2.         setTimeout(function() {
   
3.             for(var i=0;i< s.columnHeaders.rows.length;i++){
   
4.                 var row = s.columnHeaders.rows[i];
   
5.                  row.wordWrap = true;
   
6.             }
   
7.             s.autoSizeRow(s.columnHeaders.rows.length-1, true);
   
8.         });
   
9.     }
   
10.     // bind a grid to the raw data
    
11.     var theGrid = new FlexGrid('#theGrid', {
    
12.         allowSorting: false,
    
13.         showSort: false,
    
14.         autoGenerateColumns: false,
    
15.         columns: [
    
16.             { binding: 'country', header: 'This is the Country column, but the heading is ridiculously wide so we have to wrap...', width: '2*' },
    
17.             { binding: 'sales', header: 'Sales', width: '*', format: 'n2' },
    
18.             { binding: 'expenses', header: 'Expenses', width: '*', format: 'n2' }
    
19.         ],
    
20.         itemsSource: data,
    
21.         showSelectedHeaders: 'All',
    
22.         showMarquee: true,
    
23.         deferResizing: true,
    
24.         resizedColumn: autoFitColumnHeaderWidth,
    
25.         loadedRows: autoFitColumnHeaderWidth
    
26.     });

复制代码