列宽有问题吗? (太短或太宽) [英] Columns width issues? (Too short or too wide)

问题描述

关于free-jqgrid 4.9.2，它会自动处理列宽吗?不，那么处理此问题的正确方法是什么?

Regarding free-jqgrid 4.9.2, does it automatically handle column width? No, then what's the proper way to handle this?

1)VIN&年份列包含太多可用空间

1) VIN & Year columns contain too much free spaces

2)修剪包含的记录太长而无法适合列的宽度(例如1993 Mitsubishi 3000GT 2 Dr VR-4 Turbo AWD Hatchback)

2) Trim contains few records that are too long to fit into column's width (Such as 1993 Mitsubishi 3000GT 2 Dr VR-4 Turbo AWD Hatchback)

而且，jqGrid是否在某处具有true/false的自动换行"设置?

Also, does jqGrid have true/false "word wrap" setting somewhere?

演示位于link removed

推荐答案

免费的jqGrid从4.8版本开始存在自动宽度调整功能.可用的jqGrid仍然不能自动处理所有列的宽度.需要在colModel中为列添加一些其他属性，这些属性应基于最长内容的宽度来设置宽度，并设置一些其他选项.

Auto-width adjustment exist in free jqGrid starting with 4.8 version. Free jqGrid still not handle the width of all columns automatically. One need add some additional properties in colModel for the columns which width should be set based on the width on the most long content and to set some additional options.

您当前的代码对'Vin'列使用width: 190，而对于其他任何列均未指定任何width属性，因此将使用默认值width: 150.另外，您将使用jqGrid的width: 1022选项和错误选项autoWidth: true(而不是autowidth: true)，这些选项将被忽略.这意味着网格上的div宽度(bDiv或body div)将设置为1022px，并且用户可以使用水平滚动条查看所有列.

Your current code uses width: 190 for the column 'Vin' and don't specifies any width property for any other columns, so default value width: 150 will be used. Additionally you use width: 1022 option of jqGrid and wrong option autoWidth: true (instead of autowidth: true) which will be ignored. It means that the width of the div (bDiv or body div) over the grid will be set to 1022px and the user can use horizontal scrollbar to see all columns.

我建议您阅读 Wiki文章.您可以将autoResizable: true属性添加到某些特定的列，或使用cmTemplate: { autoResizable: true }在 all 列中添加该属性.结果，网格的每个单元格的内容将被包装在<span class="ui-jqgrid-cell-wrapper">...</span>中.它允许免费的jqGrid获取列中所有单元格的内容的确切宽度，然后根据这些值计算最大值.因此，用户可以双击列大小调整器(在列之间)以将宽度设置为最佳值.在宽度计算jqGrid期间，列标题的宽度以及排序图标的宽度除列的网格单元格的宽度外.可以使用autoResizing: { compact: true }选项来减小没有可见排序图标的列的宽度.最后一个常用选项是autoresizeOnLoad: true，我建议您使用.它将具有autoResizable: true属性的列的宽度设置为最佳值.

I would recommend you to read the wiki article. You can add autoResizable: true property to some specific columns or to use cmTemplate: { autoResizable: true } to add the property in all columns. As the result the content of every cell of the grid will be wrapped in <span class="ui-jqgrid-cell-wrapper">...</span>. It allows free jqGrid to get the exact width of content for all cells of the column and then calculate the max from the values. So the user can double-click on the column resizer (between the columns) to set the width to the best value. During the width calculation jqGrid the width of the column header with the width of sorting icon additionally to the width of the grid cells of the column. One can use autoResizing: { compact: true } option to reduce the width of the columns which don't have visible sorting icon. The last common option is autoresizeOnLoad: true which I would recommend you to use. It will set the width of the columns having autoResizable: true property to the best value.

所以我建议您向网格中添加以下选项:

So I would recommend you to add the following option to your grid:

cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
autoresizeOnLoad: true

在那之后，列的宽度看起来会好得多.

After that the width of column will looks much better.

如果您希望包裹某些列的文本(如果太长)，则可以使用旧答案<中所述的CSS设置，然后将列的autoResizing的maxColWidth属性(在colModel中)或网格的autoResizing选项的全局设置maxColWidth设置为列的最大宽度.更多的长文本将被换行.

If you prefer to wrap the text of some columns if it is too long then you can use CSS settings described in the old answer and set maxColWidth property of autoResizing of the column (in colModel) or global setting maxColWidth of autoResizing option of the grid to the max width of the column. More long text will be wrapped.

这篇关于列宽有问题吗? (太短或太宽)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！