如何动态扩展/收缩 Jqgrid 中的行

Question

我有一个 jqgrid，其中有一栏写着“Shipped Via”。这一列可能有一个或多个值。即 TNT、FEDEX、ABC。输入字符串的格式可以更改。取决于我。现在，我在新行中显示所有三个值，这些值由 ', ' 分隔，即 TNT、FEDEX、ABC。

我想要的是，我只想在此列中显示“TNT”和三个点 (...) 或“更多...”之类的文本，如果有多个值。由于有多个值，单击该行+列时，该行应展开并显示所有三个值，然后再次单击该行应仅显示“TNT”。

我使用下面的代码设置了行高。

.ui-jqgrid tr.jqgrow td {
        overflow: hidden;
        height: 25px;
        padding-top: 0px;        
        font-size:1.2em;
    }

由于包装关闭，因此很少有结束词/字符消失。虽然我们可以在工具提示中看到它们。

我不想在列中包装文本。换行会增加行高。

如果我将输入字符串作为 'TNT,\nFEDEX,\nABC' 传递。所有三个值都出现在三个不同的行中，这会增加行的高度。

Answer 1

在我看来，您应该为选定和未选定的单元格定义不同的样式。我为您创建了演示，它演示了一个可能的实现。您可以将其用作解决方案的基础。

演示...在非选定行上用省略号 ( )剪切文本

并在工具提示中显示全文

但它在选定的行上使用换行

它看起来接近你需要的东西。

我在演示中使用了以下 CSS 规则

.ui-jqgrid tr.jqgrow td {
    text-overflow: ellipsis;-o-text-overflow: ellipsis;
}
.ui-jqgrid tr.jqgrow.ui-state-highlight 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: 2px;
    padding-bottom: 2px
}