Question

我已使用“sortable = true”对displaytag中的列进行了排序....但我想在列的最右侧显示排序图标...我该怎么做？在这里，我只提到了一列供您参考......

<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;
}

Answer 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>上的任意位置来激活排序。< / p>

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

更新

确保您保留当前的样式，以便保持下划线，确保它仍然以<a>标记为目标。您可以添加此标记以定位<a>代码中的所有<th>代码。

th a {
    text-underline:none;
}

Answer 2

您可能需要更改包含<display:column>

的html代码的模板文件

如何在displaytag中指定排序图标的位置

2 个答案:

更新