Cột Wordwrap trong JQGrid

Question

Bất kỳ ai cũng biết cách bọc các tên cột trong JQGrid. Hãy tìm mã JSON của tôi dưới đây

colModel: [ {name: 'RequestID', chỉ số: 'CreditRequest.CreditRequestID', width: 100, align: 'left'}, .....

Với tham chiếu đến mã trên nếu kích thước của nội dung vượt quá tôi muốn nó được bao bọc. Bất kỳ suy nghĩ hoặc nhận xét nào

Answer 1

Vâng cách đơn giản nhất để đảm bảo một ngắt dòng là để đặt một thẻ <BR/> trong tên cột khi bạn cần ngắt dòng. Ví dụ ClientPrimaryName có thể được viết như Client<BR/>PrimaryName, để nó thực sự ám như:

Khách hàng
PrimaryName

Answer 2

Bạn có thể đặt thuộc tính css trắng khoảng trắng của thẻ thứ thành bình thường. Sử dụng JQuery phải là:

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

Answer 3

Bạn cần xem xét các lớp cụ thể được áp dụng cho tiêu đề cột jqGrid của bạn. Trong trường hợp của tôi, tôi đã có những điều sau đây: ui-th-div-ie ui-jqgrid-sortable

Nhìn xa hơn một chút tôi thấy rằng có hai vấn đề CSS:

1. white-space: bình thường
2. height: 16px

Cả các thuộc tính CSS này được định nghĩa trong ui.jqgrid.css. Nhận ra rằng tôi đã có một yêu cầu cụ thể đối với lưới này mà tôi không muốn có ảnh hưởng đến việc triển khai khác mà tôi đã đưa ra các giải pháp sau đây:

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

Answer 4

Chỉ cần tham khảo nó trong file css của riêng bạn.

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

Miễn là tệp css của bạn được liệt kê trong tiêu đề sau tệp jqGrid.css thì tệp sẽ được ghi đè lên.

Answer 5

Đối với những gì nó có giá trị, ở đây nó là dành cho các dòng tiêu đề:

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

Answer 6

Dưới đây là một vài bước để cho phép gói từ trong các tế bào.

Mở ui.jqgrid.css Tìm kiếm .ui-jqgrid tr.jqgrow td Change “white-space: pre;” thành “white-space: bình thường;”

Đối bọc trong tế bào:

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

Và đối với các tiêu đề cột

.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; 
} 

Answer 7

Sử dụng này 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 
    } 

Answer 8

bạn không thể chỉ cần đặt <BR/>, trong khi đó hoạt động trên gói dòng - nó không điều chỉnh chiều cao đúng

Answer 9

này đã làm việc với jqGrid 4.4.4

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