2010-06-08 2 views
9

IE7, IE8 및 FF에서 작동하는 jqGrid에서 워드 랩핑을 구현하는 방법, 열 크기 조정 작업 (그리드가 올바르게 정렬 됨)을 수행하는 방법.IE7, IE8 및 FF에서 작동하는 jqGrid에서 단어 랩핑을 구현하는 방법

특정 너비의 div로 각 td의 내용을 내부 래핑하려고 시도했지만 삽입 한 div에는 colresize가 작동하지 않습니다. jqGrid는 크기가 조정 된 TH와 인접한 TH의 너비를 계산합니다.

모든 JavaScript '해킹'을 피할 수있는 더 나은 솔루션이 있습니까?

답변

19

jqGrid Text/Word Wrapping는 다음 CSS를 사용하여이 작업을 수행하는 방법에 대해 설명합니다

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

1 : 아주 좋은 맑은 용액. 필자는 더 이상 필요하지 않은 툴팁을 끄려는 모든 컬럼에 대해서만'ColModel'에서'title : false'를 사용하도록 제안합니다. 하나는 약간의 기억을 저장할 것입니다. 또한 테이블의 모든 셀에 대해'텍스트 정렬 '과 같은 다른'수직 정렬'을 사용하는 것도 흥미로울 수 있습니다. – Oleg

+0

챔피언 !!! 좋은 대답 + 팁. – bcm

+0

은 결국 vertical-align : text-top을 제거하여 IE에서 오버 플로우 된 숨겨진 내용이있는 열에서 앵커의 밑줄 스타일을 유발했습니다. (밑줄 만 오버플로!) – bcm

1

사용이 CSS,이 확실히 도움이 될 것입니다.

.ui-jqgrid tr.jqgrow td { 
     word-wrap: break-word; /* IE 5.5+ and CSS3 */ 
     white-space: pre-wrap; /* CSS3 */ 
     white-space: normal !important; /* 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 
    } 
-1

Deall 모든,

을이 아래와 같이 할 수있다 :

$("#jqxgrid").jqxGrid(

      { 
       source: dataAdapter, 
       width: 1500, 
       autorowheight: true, 
       autoheight: true, 
       columnsresize: true, 
       theme: 'ui-redmond',