IT이야기

JqGrid에서 텍스트 줄 감싸기

cyworld 2021. 9. 12. 20:46
반응형

JqGrid에서 텍스트 줄 감싸기


줄 바꿈할 텍스트 줄을 얻을 수 있습니까 JqGrid? 나는 주위를 둘러 보았지만 아무것도 찾을 수 없습니다.


다음 CSS를 사용해 보세요.

    .ui-jqgrid tr.jqgrow td {
        white-space: normal !important;
    }

이것은 jqGrid 3.6을 사용하여 작동합니다.


N30이 지적했듯이 jqGrid 4.0은 이제 cellattrcolModel 옵션을 지원하여 텍스트 줄 바꿈을 보다 세밀하게 제어할 수 있습니다. 그의 예에서 :

cellattr: function (rowId, tv, rawObject, cm, rdata) { 
    return 'style="white-space: normal;"';
}

jQGrid 4.0에서 이를 수행하는 더 좋은 방법은 다음과 같이 colmodel에서 cellattr을 사용하는 것입니다.

colModel: [
            { name: 'ClientName', label: 'Client', index: 'ClientName', width: 150, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' } },

            .... other columns

            ]

이런 식으로 개별 열에 줄 바꿈 스타일을 적용할 수 있으며 !important를 사용할 필요가 없습니다.


헤더에 대해 이 문제가 있었고 IE에서도 이 문제를 해결하려면 이 모든 것이 필요하다는 것을 알았습니다. 이것은 셀이 아닌 머리글에 대한 것입니다. 이것의 문제는 아마도 당신이 원하는 것보다 더 많은 영향을 미칠 수 있다는 것입니다(나중에 발견할 것이라고 확신합니다). 그러나 항상 CSS 선택기를 수정하거나 특정 #tableIdName 또는 일부 클래스를 참조하도록 할 수 있으므로 원하는대로 선택하십시오.

.ui-jqgrid .ui-jqgrid-htable th div {
overflow: visible !important;
height: auto !important;
}

.ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
  white-space: normal !important;  
}

.ui-jqgrid .ui-th-div-ie{
  white-space: normal !important;  
}

클래스 colModel 옵션을 사용 하여 열에 CSS 클래스를 넣은 다음 white-space: normal !important;해당 클래스에 스타일 CSS 파일에 넣을 수 있습니다 .

클래스

이 옵션을 사용하면 열에 클래스를 추가할 수 있습니다. 둘 이상의 클래스를 사용할 경우 공백을 설정해야 합니다. 예를 들어 classes:'class1 class2'해당 열의 모든 셀에 class1 및 class2를 설정합니다.

그리드 CSS에는 특정 행에 줄임표를 추가할 수 있는 미리 정의된 클래스 ui-ellipsis가 있습니다. 또한 이것은 FireFox에서도 작동합니다.

참조URL : https://stackoverflow.com/questions/1730061/wrapping-text-lines-in-jqgrid

반응형