Колонка Wordwrap в JQGrid

Кто-нибудь знает, как обернуть имена столбцов в JQGrid. Пожалуйста, найдите мой код JSON ниже

colModel: [           {name: 'RequestID', index: 'CreditRequest.CreditRequestID', ширина: 100, align: 'left'},.....

В отношении вышеуказанного кода, если размер содержимого превышает, я хочу, чтобы он был завернут. Любые мысли или комментарии

Ответы

Ответ 1

Ну, самый простой способ обеспечить разрыв строки - поместить тег <BR/> в имя столбца, где вам понадобится разрыв строки. Например, ClientPrimaryName может быть записано как Client<BR/>PrimaryName, так что оно фактически отображается как:

Клиент
PrimaryName

Ответ 2

Просто укажите его в своем собственном файле css.

.ui-jqgrid tr.jqgrow td {
    height: 50px;
    white-space: normal;
}

Пока ваш файл css указан в заголовке после файла jqGrid.css, он будет переопределять его.

Ответ 3

Для чего это стоит, вот он для строки заголовка:

.ui-jqgrid .ui-jqgrid-htable th div, .ui-jqgrid-sortable  {
    height:auto;
    overflow:hidden;
    white-space:normal !important;
}

Ответ 4

Вам нужно взглянуть на конкретные классы, применяемые к заголовкам столбцов jqGrid th. В моем случае у меня было следующее: ui-th-div-ie ui-jqgrid-sortable

Посмотрев немного дальше, я обнаружил, что были две проблемы с CSS:

  • white-space: normal
  • высота: 16px

Оба этих атрибута CSS, которые определены в файле ui.jqgrid.css. Понимая, что у меня есть особые требования к этой сетке, которые я не хотел влиять на другие реализации, я придумал следующее решение:

$(".ui-jqgrid-sortable").css('white-space', 'normal');
$(".ui-jqgrid-sortable").css('height', 'auto');

Ответ 5

Вот несколько шагов, чтобы включить перенос слов в ячейках.

Откройте ui.jqgrid.css Поиск .ui-jqgrid tr.jqgrow td Изменить "white-space: pre"; на "white-space: normal;"

Для переноса в ячейку:

.ui-jqgrid tr.jqgrow td {
    white-space: normal !important;
    height:auto;
    vertical-align:text-top;
    padding-top:2px;
}

И для заголовков столбцов

.ui-jqgrid .ui-jqgrid-htable th div {
        height:auto;
    overflow:hidden;
    padding-right:4px;
    padding-top:2px;
    position:relative;
    vertical-align:text-top;
    white-space:normal !important;
}

Ответ 6

Вы можете установить свойство css белого пробела для тэга в нормальное состояние. Использование JQuery, который должен быть:

  $('.ui-jqgrid .ui-jqgrid-htable th div').css('white-space', 'normal');

Ответ 7

Используйте этот css

   .ui-jqgrid tr.jqgrow td {
        word-wrap: break-word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        overflow: hidden;
        height: auto;
        vertical-align: middle;
        padding-top: 3px;
        padding-bottom: 3px
    }

Ответ 8

вы не можете просто положить <BR/>, в то время как это работает для обертывания строки - оно не правильно регулирует высоту

Ответ 9

Это работало с jqGrid 4.4.4

.ui-jqgrid .ui-jqgrid-htable th div
{
    white-space:normal;
    height:auto !important;
}