列宽问题? (太短或太宽)
Columns width issues? (Too short or too wide)
关于free-jqgrid 4.9.2,是否自动处理列宽?不对,那么正确的处理方式是什么?
1) VIN 和 Year 列包含太多可用空格
2) Trim 包含一些太长而无法适应列宽的记录(例如 1993 Mitsubishi 3000GT 2 Dr VR-4 Turbo AWD Hatchback)
此外,jqGrid 是否在某处设置了 true/false "word wrap"?
演示位于 link removed
Auto-width 从 4.8 版本开始的免费 jqGrid 中存在调整。免费的 jqGrid 仍然不能自动处理所有列的宽度。需要在 colModel
中为应根据最长内容的宽度设置宽度的列添加一些附加属性,并设置一些附加选项。
您当前的代码对 'Vin'
列使用 width: 190
,并且没有为任何其他列指定任何 width
属性,因此默认值 width: 150
将会被使用。此外,您使用 jqGrid 的 width: 1022
选项和 错误的 选项 autoWidth: true
(而不是 autowidth: true
),它们将被忽略。这意味着 div(bDiv 或 body div)在网格上的宽度将设置为 1022px,用户可以使用水平滚动条查看所有列。
我建议您阅读 the wiki article。您可以将 autoResizable: true
属性 添加到某些特定列或使用 cmTemplate: { autoResizable: true }
在 所有 列中添加 属性。结果,网格的每个单元格的内容将被包裹在 <span class="ui-jqgrid-cell-wrapper">...</span>
中。它允许免费的 jqGrid 获取列的所有单元格内容的确切宽度,然后根据值计算最大值。因此用户可以在列大小调整器(列之间)上 double-click 将宽度设置为最佳值。在宽度计算期间,jqGrid 列的宽度 header 以及排序图标的宽度加上列的网格单元格的宽度。可以使用 autoResizing: { compact: true }
选项来减少没有可见排序图标的列的宽度。最后一个常用选项是 autoresizeOnLoad: true
,我建议您使用。它会将具有 autoResizable: true
属性 的列的宽度设置为最佳值。
所以我建议您将以下选项添加到您的网格中:
cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
autoresizeOnLoad: true
之后列的宽度看起来会好很多。
如果您希望将某些列的文本换行(如果它太长),那么您可以使用 the old answer 中描述的 CSS 设置并设置 maxColWidth
属性列的 autoResizing
(在 colModel
中)或网格的 autoResizing
选项的全局设置 maxColWidth
到列的最大宽度。较长的文本将被换行。
关于free-jqgrid 4.9.2,是否自动处理列宽?不对,那么正确的处理方式是什么?
1) VIN 和 Year 列包含太多可用空格
2) Trim 包含一些太长而无法适应列宽的记录(例如 1993 Mitsubishi 3000GT 2 Dr VR-4 Turbo AWD Hatchback)
此外,jqGrid 是否在某处设置了 true/false "word wrap"?
演示位于 link removed
Auto-width 从 4.8 版本开始的免费 jqGrid 中存在调整。免费的 jqGrid 仍然不能自动处理所有列的宽度。需要在 colModel
中为应根据最长内容的宽度设置宽度的列添加一些附加属性,并设置一些附加选项。
您当前的代码对 'Vin'
列使用 width: 190
,并且没有为任何其他列指定任何 width
属性,因此默认值 width: 150
将会被使用。此外,您使用 jqGrid 的 width: 1022
选项和 错误的 选项 autoWidth: true
(而不是 autowidth: true
),它们将被忽略。这意味着 div(bDiv 或 body div)在网格上的宽度将设置为 1022px,用户可以使用水平滚动条查看所有列。
我建议您阅读 the wiki article。您可以将 autoResizable: true
属性 添加到某些特定列或使用 cmTemplate: { autoResizable: true }
在 所有 列中添加 属性。结果,网格的每个单元格的内容将被包裹在 <span class="ui-jqgrid-cell-wrapper">...</span>
中。它允许免费的 jqGrid 获取列的所有单元格内容的确切宽度,然后根据值计算最大值。因此用户可以在列大小调整器(列之间)上 double-click 将宽度设置为最佳值。在宽度计算期间,jqGrid 列的宽度 header 以及排序图标的宽度加上列的网格单元格的宽度。可以使用 autoResizing: { compact: true }
选项来减少没有可见排序图标的列的宽度。最后一个常用选项是 autoresizeOnLoad: true
,我建议您使用。它会将具有 autoResizable: true
属性 的列的宽度设置为最佳值。
所以我建议您将以下选项添加到您的网格中:
cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
autoresizeOnLoad: true
之后列的宽度看起来会好很多。
如果您希望将某些列的文本换行(如果它太长),那么您可以使用 the old answer 中描述的 CSS 设置并设置 maxColWidth
属性列的 autoResizing
(在 colModel
中)或网格的 autoResizing
选项的全局设置 maxColWidth
到列的最大宽度。较长的文本将被换行。