2

「sortable=true」を使用して、displaytag で列を並べ替えました....しかし、列の右端に並べ替えアイコンを表示したいのですが...どうすればこれを行うことができますか? ここでは、参考のために 1 つの列だけを取り上げました...

<display:column  property="issuerName" scope="col" sortable="true" title="${issuerName}"  headerClass="hixTableHeader" class="displayTagtd" />

CSS コード :

th.sortable a {
    background-image: url(../images/common/header/arrow_off.png);
    background-repeat: no-repeat;
    background-position:right;
    text-decoration: none;
    padding-right:25px;
    padding-left: 25px;

}

th.order1 a{
    background-image: url(../images/common/header/arrow_down.png);
    background-position:right;
    background-repeat: no-repeat;
    text-decoration: none;
    padding-right:25px;
    padding-left: 25px;
}

th.order2 a{
    background-image: url(../images/common/header/arrow_up.png);
    background-repeat: no-repeat;
    text-decoration: none;
    background-position:right;
    padding-right:25px;
    padding-left: 25px;
}
4

2 に答える 2

1

<th>の代わりにつけてみてください<a>。<a>はdisplay:inline要素であるため、全体のサイズを拡大することはありません<th>。

th.sortable {
    background-image: url(../images/common/header/arrow_off.png);
    background-repeat: no-repeat;
    background-position:right;
}

th.order1 {
    background-image: url(../images/common/header/arrow_down.png);
    background-position:right;
    background-repeat: no-repeat;
}

th.order2 {
    background-image: url(../images/common/header/arrow_up.png);
    background-repeat: no-repeat;
    background-position:right;
}

または、次のように適用することもできます。これは、ソートを有効にするために の任意の場所をクリックできるため、おそらく望ましい<a>塗りつぶしになります。<th><th>

th a {
    display:block;
    width:100%;
    height:100%;
}

アップデート

現在のスタイルも維持するようにしてください。下線を維持するには、<a>タグが引き続きターゲットであることを確認する必要があります。<a>これを追加して、タグ内のすべてのタグをターゲットにすることができ<th>ます。

th a {
    text-underline:none;
}
于 2013-03-25T06:39:35.290 に答える
0

html コードを含むテンプレート ファイルを変更する必要がある場合があります。<display:column>

于 2013-03-25T06:40:51.370 に答える