【问题标题】:How to restrict maximum height of row in jqgrid如何限制jqgrid中行的最大高度
【发布时间】:2011-09-28 06:18:26
【问题描述】:

列包含长的多行文本,导致行高过大。

我根据 Tony 在 http://www.trirand.com/blog/?page_id=393/help/possible-row-height-bug-in-in-ie8/

但那些不限制行最大高度:行高仍然等于列中的行数。

如何将行的最大高度限制为某个值?文本不应换行(因为它已经在使用 jqGrid 默认设置)并且不应显示剩余的行。 (如果使用edittype textarea,则可以在编辑模式下检查整个文本)。

jqgrid tr.jqgrow td { 
  max-height  : 100px;
 }

ui-jqgrid tr.jqgrow td {
 max-height  : 100px;
 }

td {
  max-height  : 100px;
  }

tr {
  max-height  : 100px;
  }

【问题讨论】:

    标签: jqgrid


    【解决方案1】:

    您不能在tdtr 元素上使用max-height,但您可以将多行文本放置在具有相同样式的<div> 内。为此,您可以使用以下自定义格式化程序:

    formatter: function(v) {
        return '<div style="max-height: 100px">' + v + '</div>';
    }
    

    或将&lt;div style="max-height: 100px"&gt;...&lt;/div&gt; 放在您的 JSON/XML 数据中。结果你会得到类似的东西

    (我在制作屏幕截图时显示了工具提示,以显示单元格中的数据包含更多行,如网格中显示的那样) 查看对应的demohere

    【讨论】:

    • @Andrus:如果您想进行与autoencode:true 相同的编码,您可以使用$.jgrid.htmlEncode(v) 而不是v
    • @Andrus:自定义格式化程序定义单元格中包含的内容。格式化程序可以在单元格中放置 &lt;a&gt; 元素或任何其他 HTML 标记。这是设计使然。因此从自定义格式化程序返回的字符串将被放置在单元格中,无需任何编码。如果您需要对数据进行编码,您应该在自定义格式化程序的内部执行此操作。
    • @Andrus:你是对的。删除不需要的 HTML 标记并进行另一次文本转换的最正确方法是使用 edittype:'custom'。您可以找到edittype:'custom' 的示例,例如here。或者,您可以尝试使用editoptions 中的dataInit 来删除&lt;div&gt;&lt;/div&gt; 文本。
    • @Andrus:抱歉,我现在正忙于另一个项目。 recreateForm: true 选项仅用于表单编辑,因为带有所有控件的对话框在关闭时不会被破坏。它只会被隐藏。在内联编辑的情况下,控件(输入和选择)将在editRow 上新创建,并始终在编辑结束时的相应行或restoreRowsaveRow 上销毁。所以在editRow 中创建输入/选择控件时必须调用dataInit。如果在您的情况下不会调用它,则可能是 jqGrid 错误或程序中的错误。
    • @Andrus:主要问题是您在dataInit 内部使用了innerText DOM 属性。该属性在 Firefox 中不存在。这与innerTexttextContent 的问题相同。我建议你只使用$(elem).html 方法来获取/设置内部 HTML。
    【解决方案2】:

    我知道这已经晚了,但您可以将此 CSS 用于所有列

    .ui-jqgrid tr.jqgrow td {
        white-space:nowrap;
    }
    

    或者,对于单个列:

    .no-wrap-col {
        white-space: nowrap;
    }
    

    然后在您的 ColModel 中,在您想要防止换行的任何列上,应用该类:

    classes: "no-wrap-col"
    

    【讨论】:

    • 您的解决方案非常适合我。如此简单的修复。谢谢!
    • @TopherBirth 很高兴能帮到你!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-03-25
    • 2021-10-12
    • 2011-02-16
    • 1970-01-01
    • 2015-01-12
    • 1970-01-01
    • 2019-06-08
    相关资源
    最近更新 更多