3

rowEditor ボタンをカスタマイズする方法はありますか? 画像を変更したり、テキストを追加したりできるかどうかを意味します。それが不可能な場合、ボタンやリンクなどの別のコントロールで同じ動作を取得する方法はありますか?

4

2 に答える 2

11

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']}");
}

以下も参照してください。

于 2013-02-14T12:22:25.330 に答える
1

また、"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;
}
于 2015-11-25T16:35:35.347 に答える