Jquery 如何在Jqgrid中动态展开/收缩行_Jquery_Css_Jqgrid

Jquery 如何在Jqgrid中动态展开/收缩行

jquery css jqgrid

Jquery 如何在Jqgrid中动态展开/收缩行,jquery,css,jqgrid,Jquery,Css,Jqgrid,我有一个jqgrid，其中有一列写着“Shipped Via”。此列可能有一个或多个值。i、 e TNT、联邦快递、美国广播公司。可以更改输入字符串的格式。由我决定。现在，我在新行中显示所有三个值，以“，”分隔，即TNT、FEDEX、ABC 我想要的是，我只想在这个列中显示“TNT”和三个点（…）或者类似“more…”的文本，如果有多个值的话。由于有多个值，单击该行+列时，该行应展开并显示所有三个值，然后再次单击，该行应仅显示“TNT” 我用下面的代码设置了行高 .ui-jqgrid tr.j

我有一个jqgrid，其中有一列写着“Shipped Via”。此列可能有一个或多个值。i、 e TNT、联邦快递、美国广播公司。可以更改输入字符串的格式。由我决定。现在，我在新行中显示所有三个值，以“，”分隔，即TNT、FEDEX、ABC

我想要的是，我只想在这个列中显示“TNT”和三个点（…）或者类似“more…”的文本，如果有多个值的话。由于有多个值，单击该行+列时，该行应展开并显示所有三个值，然后再次单击，该行应仅显示“TNT”

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

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

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

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

如果我将输入字符串传递为“TNT、\nFEDEX、\nABC”。所有三个值都显示在三个不同的行中，这会增加行的高度。

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

在非选定行上剪切带有省略号（

…

）的文本

并在工具提示中显示全文

但它在所选行上使用换行

它看起来很接近你所需要的

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

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