PrimeFaces 在数据表中自定义 RowEditor答案

【问题标题】：PrimeFaces customize RowEditor in datatablePrimeFaces 在数据表中自定义 RowEditor
【发布时间】：2013-02-14 11:39:57
【问题描述】：

有没有办法自定义 rowEditor 按钮？我的意思是是否可以更改图像或添加文本。如果不可能，有没有办法通过按钮或链接等其他控件获得相同的行为？

【问题讨论】：

标签： java jsf-2 primefaces

【解决方案1】：

只需使用 CSS。下面的示例假设您要将其应用于所有数据表/行编辑器，并在 /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']}");
}

另见：

How do I override default PrimeFaces CSS with custom styles?

【讨论】：

谢谢，如果我想添加文本标签而不是图像怎么办？
不客气。默认情况下，组件不支持文本。您可以使用 CSS content 属性，或者使用带有文本的图像，或者创建自定义渲染器，或者使用 JS/jQuery text()。

【解决方案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;
}

【讨论】：

所以你实际上说的是：使用 css ;-)