jQuery JQGrid 中的列自动换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1976508/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Column Wordwrap in JQGrid
提问by SARAVAN
Anybody knows on how to wrap column names in JQGrid. Please find my JSON code below
任何人都知道如何在 JQGrid 中包装列名。请在下面找到我的 JSON 代码
colModel: [ { name: 'RequestID', index: 'CreditRequest.CreditRequestID', width:100, align: 'left' },.....
colModel: [ { name: 'RequestID', index: 'CreditRequest.CreditRequestID', width:100, align: 'left' },.....
With reference to the above code if the size of the content exceeds I want it to be wrapped. Any thoughts or comments
参考上面的代码，如果内容的大小超过我希望它被包装。任何想法或意见
采纳答案by SARAVAN
Well the simplest way to ensure a line break is to put a <BR/>tag in the column name where ever you need a line break. For instance ClientPrimaryNamecan be written as Client<BR/>PrimaryName, so that it actually renders as:
确保换行的最简单方法是<BR/>在需要换行的列名中放置一个标签。例如ClientPrimaryName可以写成Client<BR/>PrimaryName，这样它实际上呈现为：
Client
PrimaryName
客户
PrimaryName
回答by Christine
Just reference it in your own css file.
只需在您自己的 css 文件中引用它。
.ui-jqgrid tr.jqgrow td {
height: 50px;
white-space: normal;
}
As long as your css file is listed in the header after the jqGrid.css file then it will override it.
只要您的 css 文件列在 jqGrid.css 文件之后的标题中，它就会覆盖它。
回答by gsaslis
For what it's worth, here it is for the header row:
对于它的价值，这里是标题行：
.ui-jqgrid .ui-jqgrid-htable th div, .ui-jqgrid-sortable {
height:auto;
overflow:hidden;
white-space:normal !important;
}
回答by anitha
Here is a few steps to enable word wrapping in the cells.
以下是在单元格中启用自动换行的几个步骤。
Open up ui.jqgrid.css Search for .ui-jqgrid tr.jqgrow td Change “white-space: pre;” to “white-space: normal;”
打开 ui.jqgrid.css 搜索 .ui-jqgrid tr.jqgrow td 更改“white-space: pre;” 到“空白：正常；”
For wrap in cell:
对于包裹在单元格中：
.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height:auto;
vertical-align:text-top;
padding-top:2px;
}
And for column headers
对于列标题
.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;
}
回答by R Bremner
You need to take a look at the specific classes applied to your jqGrid th column headers. In my case I had the following: ui-th-div-ie ui-jqgrid-sortable
您需要查看应用于 jqGrid th 列标题的特定类。就我而言，我有以下几点：ui-th-div-ie ui-jqgrid-sortable
Looking a little further I found that there were two CSS issues:
再往前看，我发现有两个 CSS 问题：
- white-space: normal
- height: 16px
- 空白：正常
- 高度：16px
Both these CSS attributes where defined in ui.jqgrid.css. Realising that I had a specific requirement for this grid that I didnt want to have affecting other implementations I came up with the following solution:
这两个 CSS 属性都在 ui.jqgrid.css 中定义。意识到我对这个网格有一个特定的要求，我不想影响其他实现，我想出了以下解决方案：
$(".ui-jqgrid-sortable").css('white-space', 'normal');
$(".ui-jqgrid-sortable").css('height', 'auto');
回答by Piotr Paw?owski
You can set a white-space css property of th tag to normal. Using JQuery that should be:
您可以将 th 标签的空白 css 属性设置为正常。使用 JQuery 应该是：
$('.ui-jqgrid .ui-jqgrid-htable th div').css('white-space', 'normal');
回答by Yasser Shaikh
Use this css
使用这个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
}
回答by Nutshell
you cant just put a <BR/>, while that works on wrapping the line - it doesnt adjust the height properly
你不能只放一个<BR/>, 而它可以用来包裹线 - 它没有正确调整高度
回答by RayLoveless
This worked with jqGrid 4.4.4
这适用于 jqGrid 4.4.4
.ui-jqgrid .ui-jqgrid-htable th div
{
white-space:normal;
height:auto !important;
}
