最初如何使用向上/向下箭头制作 AngularJS 智能表头以提升用户答案

【问题标题】：How to make AngularJS smart table header with the up/down arrows initially to promote users最初如何使用向上/向下箭头制作 AngularJS 智能表头以提升用户
【发布时间】：2015-11-25 23:53:50
【问题描述】：

在 jQuery 中，这是一个可以很好地对表格进行排序的数据库插件。在 AngularJS 中，我发现 smart-table 非常相似，也满足了我的大部分需求。不过，我还有一个要求，那就是让那些 UP/DOWN 箭头最初用来提升用户这些列是可排序的。

我知道如何在对列进行排序时使用箭头，但我不知道如何在排序之前同时使用向上/向下箭头，以及在对列进行排序时更改为向上或向下箭头。

 <thead>
        <tr class="sortable">
            <th >Toggle Expand/Collapse</th>
            <th st-sort="projectName" st-sort-default="default" st-skip-natural="true">Project Name</th>
            <th st-sort="val" st-skip-natural="true">Project Value</th>
            <th st-sort="cost">Cost of Project</th>
            <th st-sort="cost_benefit_ratio">Cost Benefit Ratio</th>
            <th st-sort="creatorName">Creator</th>
            <th st-sort="create_at">Create Time</th>
            <th st-sort="LastEditorName">Last Editor</th>
            <th st-sort="edit_at">Edit Time</th>
            <th> Edit </th>
        </tr>
        <tr>
            <th colspan="10"><input st-search="" class="form-control" placeholder="global search ..." type="text"/></th>
        </tr>
    </thead>

请看我附上的图片。

第一个是我想要实现的。第二个是我现在的情况。

【问题讨论】：

你试过什么？请发帖minimal reproducible example - 我们会帮助您解决问题，但不要要求我们为您编写代码。
对不起，我忘了添加我的代码。 @penne12

标签： angularjs smart-table tableheader

【解决方案1】：

我遇到了类似的问题，只是我希望排序切换箭头位于标题的右侧。

我用我自己的空表覆盖了智能表应用的 .st-sort-ascent:before CSS 规则，并应用了一个 :after 规则。

并非我的所有列都是可排序的，所以我只将“sort-header”类应用于那些列。

我使用了 FontAwesome 图标而不是图像。

.sort-header {
    cursor: pointer;
}
.sort-header:after {
    font-family: FontAwesome;
    content: '  \f0dc';
    color: lightgrey;
}
.st-sort-ascent:before {
    content: '';
}
.st-sort-ascent:after {
    font-family: FontAwesome;
    content: '  \f0de';
    color: black;
}
.st-sort-descent:before {
    content: '';
}
.st-sort-descent:after{
    font-family: FontAwesome;
    content: '  \f0dd';
    color: black;
}

【讨论】：

【解决方案2】：

我想我解决了我的问题。

在 CSS 中：

table thead tr.sortable th{
    background-image:url("./images/up-down-arrow.png");
    background-repeat: no-repeat;
    background-position: center right;
}

.sortable {
    cursor: pointer;
}

.st-sort-ascent{
    background-image:url("./images/up-arrow.png") !important;

}

.st-sort-descent{
    background-image:url("./images/down-arrow.png") !important;
}

确保添加了“！important”，这样背景图像就会被覆盖。

【讨论】：

【解决方案3】：

通常你会使用过滤器来做到这一点。您可以在您的 ng-repeat 中添加一个过滤器，它应该几乎会自动对结果进行排序和过滤。

orderBy 在这里描述

angular orderBy

【讨论】：

【解决方案4】：

你来了

.st-table thead tr th {
  cursor: pointer;
  padding-right: 18px;
  position: relative;
}
.st-table thead tr th:before,
.st-table thead tr th:after{
  content: "";
  border-width: 0 4px 4px;
  border-style: solid;
  border-color: #000 transparent;
  visibility: visible;
  right: 5px;
  top: 50%;
  position: absolute;
  opacity: .3;
  margin-top: -4px;
}
.st-table thead tr th:before{
  margin-top: 2px;
  border-bottom: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #000;
}
.st-table thead tr th.st-sort-ascent:before{
  visibility: hidden;
}
.st-table thead tr th.st-sort-ascent:after{
  visibility: visible;
  filter: alpha(opacity=60);
  -khtml-opacity: .6;
  -moz-opacity: .6;
  opacity: .6;
}
.st-table thead tr th.st-sort-descent:before{
  visibility: visible;
  filter: alpha(opacity=60);
  -khtml-opacity: .6;
  -moz-opacity: .6;
  opacity: .6;
}
.st-table thead tr th.st-sort-descent:after{
  visibility: hidden;
}

【讨论】：