jquery - 如何动态扩展/缩小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;
    }

由于自动换行处于关闭状态，因此几乎没有结束词/字符消失。虽然我们可以在工具提示中看到它们。

我不想在列中换行。包装会增加行的高度。

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

最佳答案

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

The demo在未选择的行上用省略号（...）剪切文本



并在工具提示中显示全文



但它在所选行上使用换行



它看起来很接近您的需求。

我在演示中使用了以下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
}

关于jquery - 如何动态扩展/缩小Jqgrid中的行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24695021/