How to have jqgrid cell overflow behave like an html table

问题:

I have a jqgrid and some of the cells have a good amount of content in them. It seems that jqgrid's default is to have the overflow hidden and to not have the text wrap to new lines (if needed). Is there a way to allow jqgrid cells to expand as needed?

回答1:

Had the same problem, this isn't answered and came first in google, so here it is:

/* your grid discriminator*/ tr td {     white-space: normal;     height: auto; }

I also found recommendations of overflow: normal; this isn't even legal css; it's not in W3C's list and FireBug ate it right up.

回答2:

You can use the 'classes' Property of colModel, e.g.:

colModel: [         { name: 'ClientName', label: 'Client', index: 'ClientName', width: 150, classes: 'wrappedJqGridCell'},          .... other columns          ]

And then have something appropriate in your CSS file:

.wrappedJqGridCell {     white-space: normal !important;     line-height: 200%; }

This way you can handle the styling centrally yet still apply it on a cell-by-cell basis. And you don't have to be using JQGrid 4 or above, as with the 'cellattr' solution.

Bear in mind if you prefer to use an ellipsis (' ...') rather than wrap, there is a class built-in to the JQGrid CSS, this being 'ui-ellipsis'. This will work in FireFox too (which usually requires a bit more work to get an ellipsis going).

回答3:

Hmm.. already tried the obvious solution? Adapt the CSS that comes with jqgrid to allow cells to do this?

回答4:

with jQGrid v4.0 use cellattr in colmodel

like following

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

转载请标明出处:How to have jqgrid cell overflow behave like an html table

文章来源: How to have jqgrid cell overflow behave like an html table