добавить значки внутри заголовка ячейки сетки JQ - PullRequest
Новая
       33

добавить значки внутри заголовка ячейки сетки JQ

0 голосов
/ 01 июня 2018

У меня есть 2 иконки, которые должны отображаться в заголовке атрибута ячейки, как показано на рисунке ниже. При нажатии на значок необходимо выполнить какое-либо действие.

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

Я пробовал с: 

colModel: [
                    //{name: 'id', index: 'id', width: 65, align: 'center', sorttype: 'int'},
                    {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
                        formatter: 'date', formatoptions: {newformat: 'd-M-Y', reformatAfterEdit: true}, datefmt: 'd-M-Y'},
                    {name: 'name', index: 'name', width: 70,
                        cellattr: function (rowId, val, rawObject, cm, rdata) {
                            return 'title="<i class = fa fa-edit></i>"';
                        }}
]

При наведении на ячейку не появляется значок шрифта, вместо того, чтобы получить <i class = fa fa-edit></i>

Экран Dummy Developed: введите описание изображения здесь

Используется начальная загрузка 3.3.7 и шрифт awesome 4.7 и Jquery UI css

Как добавить значки ..?

1 Ответ

0 голосов
/ 01 июня 2018

Непонятно, какую версию jqGrid вы используете и с какой форк jqGrid ( бесплатный jqGrid , коммерческий Guriddo jqGrid JS или старый jqGrid в версии <= 4.7).Непонятно, какой CSS-фреймворк вы используете: jQuery UI, Bootstrap или оба.Таким образом, я предполагаю, что вы используете JQuery UI.В случае, если вам нужно использовать <a href="http://jqueryui.com/tooltip/" rel="nofollow noreferrer"> подсказку , чтобы отобразить информацию title другим способом.Например, код 

$grid.tooltip({
    items: "td[title]",
    content: function() {
        var element = $(this),
            title = element.attr("title");
        if (title) {
            return '<span class="fa fa-lg fa-fw fa-edit"></span>' +
                title;
        }
    }
});

будет использоваться в демоверсии https://jsfiddle.net/OlegKi/yvbt6w54/60/. Результаты выглядят как на картинке ниже: enter image description here

...