PrimeFaces定制Datatable中的RowEditor

Question

有没有办法自定义rowEditor按钮？我的意思是是否可以更改图片或添加文本。 如果不可能，是否有一种方法可以使用其他控件（如按钮或链接）来实现相同的行为？

- Paolo Dragone

Answer 1

只需使用 CSS。下面的示例假定您希望将其应用于所有 datatables/roweditors，并且在 /resources/images 文件夹中有所需的图像文件。

.ui-datatable .ui-row-editor .ui-icon-pencil {
    background-image: url("#{resource['images/pencil.png']}");
}

.ui-datatable .ui-row-editor .ui-icon-check {
    background-image: url("#{resource['images/check.png']}");
}

.ui-datatable .ui-row-editor .ui-icon-close {
    background-image: url("#{resource['images/close.png']}");
}

另请参阅：

• 如何使用自定义样式覆盖默认的PrimeFaces CSS？

- BalusC

---

谢谢，如果我想添加文本标签而不是图像怎么办？ - Paolo Dragone

不客气。该组件默认不支持文本。您可以使用CSS的content属性，或者使用带有文本的图像，或创建自定义渲染器，或使用JS/jQuery的text()方法。 - BalusC

Answer 2

此外，如果您想使用“Font Awesome”中的fa-icons，您可以从font-awesome.css中复制分配给它们的类。

.ui-datatable table tbody tr td .ui-row-editor .ui-icon-pencil 
{
   background: none !important;
   text-indent: initial;
   /* display: inline-block; */
   font: normal normal normal 14px/1 FontAwesome;
   font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transform: translate(0, 0);
}
.ui-datatable table tbody tr td .ui-row-editor .ui-icon-pencil:before {
   content: "\f044";
}
.ui-datatable table tbody tr td .ui-row-editor .ui-icon-pencil:hover {
   font-weight: bold;
}

- MugiWara No Carlos

---

所以你的意思是：使用CSS；-) - Kukeltje