Question

版本：AngularJS 1.6.4，angular-datatables 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>

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

 .withOption('autoWidth', true);

在dtColumnDefBuilder中，

 .notSortable()

工作正常，但不是

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

我尝试过的事情：

设置表格标题的内联样式宽度
注释掉dtOptions .withOption（）以检查

感谢您的帮助

Answer 1

如果要覆盖默认值和DT的假设，必须声明一个显式的CSS类。 autoWidth或多或少没用，imho。示例：

.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范围之外，请参阅此答案 - ＆gt; jQuery DataTables fixed size for ONE of the columns?

Angularjs角度数据表在DTColumnDef

1 个答案: