JQGrid 中的列自动换行

发布于 2024-08-15 20:35:25 字数 213 浏览 4 评论 0原文

任何人都知道如何在 JQGrid 中包装列名。请在 colModel 下面找到我的 JSON 代码

:[ { name: 'RequestID', index: 'CreditRequest.CreditRequestID', width:100,align: 'left' },.....

参考上面的代码如果内容的大小超过了我希望它被换行。任何想法或评论

Anybody knows on how to wrap column names in JQGrid. Please find my JSON code below

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(9

歌枕肩 2024-08-22 20:35:25

只需在您自己的 css 文件中引用它即可。

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

只要您的 css 文件列在 jqGrid.css 文件后面的标头中,它就会覆盖它。

Just reference it in your own css file.

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

秋心╮凉 2024-08-22 20:35:25

对于它的价值,这里是标题行:

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

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;
}
过潦 2024-08-22 20:35:25

您需要查看应用于 jqGrid 列标题的特定类。就我而言,我有以下内容: ui-th-div-ie ui-jqgrid-sortable

再进一步看,我发现存在两个 CSS 问题:

  1. 空白:正常
  2. 高度:16px

这两个CSS 属性在 ui.jqgrid.css 中定义。意识到我对此网格有一个特定的要求,我不想影响其他实现,因此我提出了以下解决方案:

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

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

Looking a little further I found that there were two CSS issues:

  1. white-space: normal
  2. height: 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:

$(".ui-jqgrid-sortable").css('white-space', 'normal');
$(".ui-jqgrid-sortable").css('height', 'auto');
深空失忆 2024-08-22 20:35:25

以下是在单元格中启用自动换行的几个步骤。

打开 ui.jqgrid.css
搜索 .ui-jqgrid tr.jqgrow td
更改“空白:pre;”到“空白:正常;”

对于单元格换行:

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

以及列标题

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

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;”

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;
}
半世晨晓 2024-08-22 20:35:25

您可以将 th 标签的空白 css 属性设置为正常。使用 JQuery 应该是:

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

You can set a white-space css property of th tag to normal. Using JQuery that should be:

  $('.ui-jqgrid .ui-jqgrid-htable th div').css('white-space', 'normal');
愛上了 2024-08-22 20:35:25

使用这个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
    }

Use this 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
    }
夜清冷一曲。 2024-08-22 20:35:25

你不能只放一个
,虽然它可以包裹线 - 它不能正确调整高度

you cant just put a <BR/> , while that works on wrapping the line - it doesnt adjust the height properly

自找没趣 2024-08-22 20:35:25

这适用于 jqGrid 4.4.4

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

This worked with jqGrid 4.4.4

.ui-jqgrid .ui-jqgrid-htable th div
{
    white-space:normal;
    height:auto !important;
}
抹茶夏天i‖ 2024-08-22 20:35:25

确保换行符的最简单方法是在列名称中需要换行符的位置放置一个
标记。例如,ClientPrimaryName 可以写为 Client
/>PrimaryName
,这样它实际上呈现为:

Client
PrimaryName

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 ClientPrimaryName can be written as Client<BR/>PrimaryName, so that it actually renders as:

Client
PrimaryName

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文