2015-08-06 2 views
-1

Как добавить многоточие в jQGrid header headerText.Как добавить многоточие в jQGrid header headerText

Текущий Колонка Html Заголовок для jqGrid в так:

<th id="ControlType" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 141px;"> 
<span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span> 
<div id="jqgh_PageGrid_ControlType" class="ui-jqgrid-sortable"> 
    W'ñÝÃáèTÿpê !!!_W<span class="s-ico" style="display:none"> 
     <span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span> 
     <span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span> 
    </span> 

"

Я хочу добавить многоточие к этому "W'ñÝÃáèTÿpê !!! _ W" в header Я не хочу редактировать jQGrid.js

ответ

0

Попробуйте использовать правило CSS

.ui-jqgrid .ui-jqgrid-labels .ui-th-column div { text-overflow: ellipsis } 
0

Поскольку .s-ico пролета теги внутри .ui-jqgrid-sortable установлен в display:none вы можете использовать псевдо-элемент для добавления многоточия к тексту:

.ui-jqgrid-sortable:after { 
 
    content:"..."; 
 
}

Если диапазон будет переключен на display:block, тогда вам нужно обернуть нужный текст в другой элемент и применить правило css к этому элементу.

P.S: @ Решение Олега будет работать только в том случае, если вы установили заголовок overflow на hidden, и содержимое фактически выходит из его контейнера.

+0

Да по умолчанию значок - это блок отображения. Когда я добавляю к нему многоточие. Значок также переключается (не желаемый вариант) Обертка только текста в div потребует изменений в jqGrid.js (я считаю, что именно здесь создается этот html). и мне не разрешено вносить изменения в его jQgrid.js. –

+0

Можем ли мы каким-то образом обернуть «W'ñÝÃáèTÿpê !!! _ W» этот текст в div, используя jquery, тогда это будет легкий легкий выход. :) –

+0

@RohitKumar Проверьте это: http://stackoverflow.com/questions/298750/how-do-i-lect-text-nodes-with-jquery Затем вы можете обернуть текстовый узел, используя метод jQuery 'wrap': http://api.jquery.com/wrap/ – Nojan