Angularjs Angular 数据表更改 DTColumnDef 上的列宽

Question

版本:AngularJS 1.6.4， Angular 数据表 0.5.6

问题:无法使用

更改列宽

.withOption('width', '20%')

我已经浏览了大部分 SO 问题，但仍然没有找到答案。

这是我的示例代码:

JS:

 $scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('paging', false)
    .withOption('bInfo', false)
    .withOption('searching', false)
    .withScroller().withOption('scrollY', 300)
    .withOption('responsive', true)
    .withOption('scrollX', true)
    .withOption('scrollCollapse', true)
    .withOption("rowCallback", rowCallback)
    .withOption('autoWidth', true);


 $scope.dtColumnDefs = [
        DTColumnDefBuilder.newColumnDef(0).notSortable(),
        DTColumnDefBuilder.newColumnDef(1).notSortable(),
        DTColumnDefBuilder.newColumnDef(2),
        DTColumnDefBuilder.newColumnDef(3),
        DTColumnDefBuilder.newColumnDef(4),
        DTColumnDefBuilder.newColumnDef(5).notSortable(),
        DTColumnDefBuilder.newColumnDef(6).notSortable(),
        DTColumnDefBuilder.newColumnDef(7).notSortable(),
        DTColumnDefBuilder.newColumnDef(8).notSortable().withOption('width', '20%'),
        DTColumnDefBuilder.newColumnDef(9).notSortable(),
        DTColumnDefBuilder.newColumnDef(10).notSortable(), 
        DTColumnDefBuilder.newColumnDef(11).notSortable(),
        DTColumnDefBuilder.newColumnDef(12).notSortable(),
        DTColumnDefBuilder.newColumnDef(13).notSortable()
    ];

HTML:

 <table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="hover">
            <thead>
                <tr>
                     <th><!--14 headers here--></th>
                </tr>
            </thead>
        <tbody>
                <tr>
                     <td><!--14 data cells here--></td>
                </tr>
       </tbody>
 </table>

我已经确认大多数 dtOptions withOption 都工作正常，除了

 .withOption('autoWidth', true);

在 dtColumnDefBuilder 中，

 .notSortable() 

也工作正常，但不是

.withOption('width','20%')

我尝试过的事情:

• 设置表格标题的内联样式宽度
• 注释掉 dtOptions .withOption() 来检查

感谢您的帮助

Answer 1

如果您想覆盖默认值和 DT 的假设，您必须声明一个显式 CSS 类。 autoWidth 或多或少没用，恕我直言。示例:

.td-small {
  width: 40px;
  max-width: 40px;
}

DTColumnDefBuilder
 .newColumnDef(8)
 .notSortable()
 .withClass('td-small')

您可以组合类，即 .withClass('classA classB classC')

尽管文档讨论了百分比，但它仅适用于非常狭窄的场景，即您将所有列设置为具有特定百分比并且将容器设置为固定宽度，例如 900px。 “未定义”的 20% 不计算。我在项目中可以找到的另一个典型示例是需要用省略号缩小的长内容:

.td-200-ellipsis {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

如果您想对超出 DataTables 范围的列宽进行极端控制，请参阅此答案 -> jQuery DataTables fixed size for ONE of the columns?