2

我已经使用“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;
}
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 回答