JqGrid Pager Area - Использование Font Awesome Icons

Question

Я хотел бы использовать иконки Font Awesome:

<i class="icon-edit"></i>

в области пейджера jqGrid вместо физических изображений по умолчанию.

.navButtonAdd('#vw_ComplaintSearchGridPager', { caption: '', buttonicon: 'ui-icon-disk', title: 'Save Grid Settings', onClickButton: function () { $(this).SaveGridSetting(); } })

Кто-нибудь знает, как этого добиться?

Answer 1

Это очень интересный вопрос! Я никогда раньше не использовал иконки Font Awesome, но это кажется очень интересным проектом.

В настоящее время jqGrid не имеет прямой поддержки значков Font Awesome, но я подготовил простую демонстрацию, в которой показано, как заменить стандартные значки навигатора jQuery UI соответствующими значками из Font Awesome.

В основном видно четкую разницу с исходными значками навигатора после увеличения страницы. Я включил ниже навигатор, отображаемый с увеличением 400%:

Оригинальный навигатор с использованием иконок jQuery UI

Навигатор с иконками Font Awesome:

Код, который я использовал, очень прост. Вместо использования

$grid.jqGrid("navGrid", "#pager", {view: true});

я использовал

$grid.jqGrid("navGrid", "#pager", {editicon: "icon-pencil",
    addicon: "icon-plus", delicon: "icon-trash", searchicon: "icon-search",
    refreshicon: "icon-refresh", viewicon: "icon-file",view: true});

$("#pager .navtable .ui-pg-div>span").removeClass("ui-icon");

Я добавил CSS

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span { margin: 0 5px; font-size: 12px; }

Я думаю, что можно заменить больше иконок jQuery UI на иконки Font Awesome, но это не очень просто. Я больше подумаю над этой проблемой и свяжусь с разработчиком jqGrid (Тони Томовым), чтобы сделать jqGrid более дружественным к иконкам Font Awesome, чтобы можно было очень просто переключиться на иконки Font Awesome.

ОБНОВЛЕНО: я добавил код, который позволяет сверху заменить больше значков с пейджера:

var $pager = $grid.closest(".ui-jqgrid").find(".ui-pg-table");
$pager.find(".ui-pg-button>span.ui-icon-seek-first")
    .removeClass("ui-icon ui-icon-seek-first")
    .addClass("icon-step-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-prev")
    .removeClass("ui-icon ui-icon-seek-prev")
    .addClass("icon-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-next")
    .removeClass("ui-icon ui-icon-seek-next")
    .addClass("icon-forward");
$pager.find(".ui-pg-button>span.ui-icon-seek-end")
    .removeClass("ui-icon ui-icon-seek-end")
    .addClass("icon-step-forward");

В результате получается следующий пейджер:

вместо

ОБНОВЛЕНО 2: код для изменения значка минимизации выглядит немного завершенным. Сначала нужно поменять иконку

$grid.closest(".ui-jqgrid")
    .find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>.ui-icon-circle-triangle-n")
    .removeClass("ui-icon ui-icon-circle-triangle-n")
    .addClass("icon-circle-arrow-down");

а затем меняйте его после каждого нажатия на иконку:

onHeaderClick: function (gridstate) {
    if (gridstate === "visible") {
        $(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
            .removeClass("icon-circle-arrow-up ui-icon-circle-triangle-n")
            .addClass("icon-circle-arrow-down");
    } else if (gridstate === "hidden") {
        $(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
            .removeClass("icon-circle-arrow-down ui-icon-circle-triangle-s")
            .addClass("icon-circle-arrow-up");
    }
}

Дополнительно нужно добавить CSS

.ui-jqgrid .ui-jqgrid-titlebar-close>span { margin: 0 3px; font-size: 16px; }
.ui-jqgrid .ui-jqgrid-titlebar-close { text-decoration: none; }

Для исправления сортировки иконок я использовал код

var $sortables = $grid.closest(".ui-jqgrid")
    .find(".ui-jqgrid-htable .ui-jqgrid-labels .ui-jqgrid-sortable span.s-ico");
$sortables.find(">span.ui-icon-triangle-1-s")
    .removeClass("ui-icon ui-icon-triangle-1-s")
    .addClass("icon-sort-down");
$sortables.find(">span.ui-icon-triangle-1-n")
    .removeClass("ui-icon ui-icon-triangle-1-n")
    .addClass("icon-sort-up");

и CSS

.ui-jqgrid .ui-icon-asc { height: auto; margin-top: 0; }
.ui-jqgrid .ui-icon-asc, .ui-jqgrid .ui-icon-desc {
    height: auto; margin-top: 0; margin-left: 5px;
}
.ui-jqgrid .s-ico>.ui-state-disabled, .s-ico>.ui-state-disabled { padding: 0; }

В результате получится следующее:

ОБНОВЛЕНО 3: В следующей демонстрации можно найти более полную замену иконок jQuery UI на иконки Font Awesome.

ОБНОВЛЕНО 4: Ответ предоставляет решение для Font Awesome версии 4.x.

Answer 2

Понял, я бы поставил альтернативный ответ CSS для тех, кто заинтересован. Один из наших разработчиков реализовал опцию JS, которая работала функционально, однако была задержка, прежде чем он правильно отрисовался (не идеально).

Мы использовали отличные от шрифта иконки для наших вариантов подкачки, и вот как мы это реализовали.

Нашел четыре класса, которые jqGrid использовал для значков подкачки, которые мы хотели настроить, и создал следующий css для применения базовых шрифтов.

.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;

}

Тогда это просто вопрос захвата content из иконки семейства шрифтов и использовать их как свои собственные.

.ui-icon-seek-next:before
{
    content: "\f105";
}
.ui-icon-seek-prev:before
{
    content: "\f104";
}
.ui-icon-seek-end:before
{
    content: "\f101";
}
.ui-icon-seek-first:before
{
    content: "\f100";
}

Таким образом, весь CSS вместе выглядит так

.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;

}
.ui-icon-seek-next:before
{
    content: "\f105";
}
.ui-icon-seek-prev:before
{
    content: "\f104";
}
.ui-icon-seek-end:before
{
    content: "\f101";
}
.ui-icon-seek-first:before
{
    content: "\f100";
}

И вывод на нашу сетку без JS и без задержек

Answer 3

Глядя на ответ от Олега выше, я сделал следующее, чтобы упростить вещи.Дополнительный CSS

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span.fntawsm { margin: 0 5px; font-size: 12px; padding-left:2px;padding-right:2px;}

** отступ слева:2 пикселя, отступ справа:2 пикселя; не является обязательным, и это работает только с иконками без заголовка...

А потом просто начните добавлять красивые иконки в navButton.

caption:"", // important for above
title:"Give any",
buttonicon:"fntawsm icon-remove"
buttonicon:"fntawsm icon-eject icon-rotate-90"

и т.д. Вы можете использовать все дополнительные функции из font-awesome, например icon-rotate-XX. Таким образом, мне не нужно было удалять класс значков из промежутков.

Answer 4

Вдохновленный ответом @afreeland, я создал css, доступный на github, который позволяет вам конвертировать ваши иконки в иконки Font-Awesome.

На мой взгляд, преимущество в производительности по сравнению с методом jquery, который описал @Oleg. Это также очень элегантное решение, на мой взгляд.

Вы можете использовать его: https://github.com/guylando/ToAF

Примечание. Для этих стилей файлов ToAF.css необходимо отдавать приоритет другим стилям значков, чтобы этого можно было достичь, например, путем копирования содержимого CSS в тег в документе.