Как сделать заголовок смарт-таблицы AngularJS со стрелками вверх/вниз изначально для продвижения пользователей

Раньше я программировал на JQuery, а теперь перешел на AngularJS. В JQuery это подключаемый модуль базы данных для красивой сортировки таблицы. В AngularJS я обнаружил, что смарт-таблица очень похожа и также отвечает большинству моих потребностей. Тем не менее, у меня есть еще один запрос, который заключается в том, чтобы изначально иметь эти стрелки ВВЕРХ/ВНИЗ, чтобы продвигать пользователей, которые могут сортировать эти столбцы.

Я получил, как иметь стрелку, когда столбец отсортирован, НО я не знаю, как иметь стрелки вверх/вниз перед сортировкой и переходить на стрелку вверх или вниз, когда столбец отсортирован.

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

Пожалуйста, смотрите мою прикрепленную фотографию.

Первое, чего я хочу достичь. Второе - моя текущая ситуация. введите здесь описание изображения

введите здесь описание изображения


angularjs tableheader sortable-tables smart-table
person Matilda Yi Pan    schedule 25.11.2015    source источник
comment
Что вы пробовали? Пожалуйста, опубликуйте минимально воспроизводимый пример - мы поможем вам решить проблемы, но не просите нас написать код для ты.   -  person Ben Aubin    schedule 26.11.2015
comment
Извините, я забыл добавить свой код. @penne12   -  person Matilda Yi Pan    schedule 26.11.2015

Ответы (4)


arrow_upward
4
arrow_downward

У меня была аналогичная проблема, за исключением того, что я хотел, чтобы стрелки переключения сортировки находились справа от заголовков.

Я переопределил правила CSS .st-sort-ascent:before, применяемые смарт-таблицей, с моими собственными пустыми, и применил правило :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;
}
person flying_kiwi    schedule 18.04.2016

arrow_upward
1
arrow_downward

Я думаю, что решил свою проблему.

В 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», чтобы фоновое изображение было переопределено.

person Matilda Yi Pan    schedule 26.11.2015

arrow_upward
0
arrow_downward

Обычно вы делаете это с фильтрами. Вы можете добавить фильтр в свой ng-repeat, и он должен почти автоматически сортировать и фильтровать результаты.

orderBy описан здесь

угловой порядок

person sillysicko    schedule 26.11.2015

arrow_upward
0
arrow_downward

Вот, пожалуйста

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

person Haidang Nguyen    schedule 20.07.2016