如何动态展开/收缩Jqgrid中的行 [英] How to Expand/Shrink row in Jqgrid dynamically

问题描述

我有一个jqgrid，其中有一列说Shipped Via。此列可以有一个或多个值。即TNT，FEDEX，ABC。
可以更改输入字符串的格式。取决于我。现在我在新行中显示所有三个值，它们由'，'分隔，即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'。

解决方案

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

演示使用省略号（ ... ）在未选择的行上剪切文字

>

并在工具提示中显示全文

$ b < /i.stack.imgur.com/i3N25.pngalt =enter image description here>

它看起来接近你需要的。

我在演示中使用了以下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+和CSS3 * / 
 white-space：pre-wrap; / * CSS3 * / 
 white-space：-moz-pre-wrap; / * Mozilla，since 1999 * / 
空格：-pre-wrap; / * Opera 4-6 * / 
白色空格：-o-pre-wrap; / * Opera 7 * / 
 overflow：hidden; 
 height：auto; 
 vertical-align：middle; 
 padding-top：2px; 
 padding-bottom：2px 
} 
  

I have one jqgrid, in which there is one column say 'Shipped Via'. This column may have one or more values. i.e TNT,FEDEX,ABC. The format of input string can be changed. Its upto me. For now I am showing all three values in new lines, which is seperated by ', ' i.e. TNT, FEDEX, ABC.

What I want is,I want to show only 'TNT' and three dots (...) or text like 'more...', if there are more than one value, in this column. Since there are more than one value, on click of that row+column, the row should get expanded and show all three values and again you click and the row should show only 'TNT'.

I have set row height using below code.

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

Since the wrapping is OFF so few end words/chars get disappear. Though we can see them in tooltip.

I do not want to do wrapping of text in columns. Wrapping increase the height of row.

If I pass input string as 'TNT,\nFEDEX,\nABC'. All three values appear in three different lines which increases the height of row.

解决方案

It seems to me that you should define different styles for selected and non-selected cells. I created the demo for you which demonstrates an possible implementation. You can use it as the basis of your solution.

The demo cut the text with ellipses (...) on non-selected rows

and display the full text in the tooltips

but it use wrapping on selected row

It looks close to what you need.

I used the following CSS rules in the demo

.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
}

这篇关于如何动态展开/收缩Jqgrid中的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！