javascript - Angular devextreme 风格的 dxi 列

Question

我需要在 Datagrid 中创建一列以获得指针光标，但任何样式都不会改变一切。我试过使用 dxi-column 选择器并使用一个类。与 和without::ng-deep。

有什么想法或解决方案吗？

<dxi-column dataField="companyDetails.name" caption="Company">
    </dxi-column>

我已经开始使用模板，但我无法让包装器填写单元格

::ng-deep .dx-template-wrapper {
    cursor: pointer;

}

Answer 1

看看 的cssClass属性column。

这是它的文档

就像是：

组件.ts

<dxi-column dataField="companyDetails.name" caption="Company" cssClass="pointer-column">
</dxi-column>

组件.scss

::ng-deep pointer-column {
  cursor: pointer;
}

或者，如果您希望此类全局应用于所有网格，您可以将其添加到style.scss文件中而无需任何::ng-deep需要。或者更好的是，你可以只通过给它们一个类来让它们对某些网格全局化：

任何组件.ts

<dx-data-grid
...
class="a-type-of-grid">
</dx-data-grid>

样式.css

//anything with this class
.pointer-column {
 cursor: pointer;
}
//grids (or other elements if you want) with the 'a-type-of-grid' class 
.a-type-of-grid {

  /*Some css just for this type of grid*/

  //overwrite the global pointer-column class
  .pointer-column {
    //css you want
  }
}

希望这足够清楚。:)