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

我有一个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; } 

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

我不想在列中包装文本。 包裹增加行的高度。

如果我将输入字符串作为’TNT，\ nFFEDEX，\ 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 }