如何仅限制网格中的jqgrid textarea高度 [英] how to restrict jqgrid textarea height in grid only

问题描述

Textarea包含批次或行。在jqgrid网格中，只显示第一行。
在jqgrid视图窗口中，还应显示更多行和可能的滚动条。

Oleg回答 colModel 的属性。例如，您将使用类：textInDiv相应列中单元格的< td> 将获取class属性。因为您在网格内部和视图表单内部具有不同的元素层次结构，所以您可以在两种情况下指定不同的高度限制：

  {name：Description，edittype：textarea，类：textInDiv，
格式化程序：function（v）{
 return'< div>'+ $ .jgrid.htmlEncode（v ）+'< / div>'; 
}} 
  

和

  tr.jqgrow> td.textInDiv> div {
 max-height：20px; 
溢出：自动
} 
 td.form-view-data> span> div {
 max-height：150px; 
溢出：auto 
} 
  

演示演示了结果。如何在下面的图片中看到单元格包含的 max-height 对于网格和视图形式是不同的：

Textarea contains lot or lines. In jqgrid grid only first line should displayed. In jqgrid view window more lines and possible scrollbar also should be displayed.

Oleg answer from How to restrict maximum height of row in jqgrid

restricts textarea height in view window also to single line. How to show first line in grid only but show more lines in jqgrid view form ?

colmodel is:

{"name":"Description",
  "edittype":"textarea",
  "wrap":"on",
  "formatter":function(v){ return '<div style="max-height:20px">'+$.jgrid.htmlEncode(v)+'</div>';
                             } 
  ,"editoptions":{"class":"","rows":18,"wrap":"off","style":"width:800px",
      "readonly":"readonly"
      },
  "editrules":{"edithidden":true},"editable":true,"width":539,
  "classes":"jqgrid-readonlycolumn"}

jqgrid view window shows multiple lines. This should remain the same:

grid shows also multiple lines. This is wrong.:

How to force grid to show only first line in each textarea

Or is is possible to show more lines in bottom of screen: if some row becomes active, first 10 lines from textarea column should appear in bottom. This is like in windows log viewer: moving into event row shows event long data in separate window

解决方案

If I understand your problem correctly you can solve it in relatively easy way. You should just use CSS instead of inline styles for setting of max-height of the div with multiline data. You can for example set some class on <td> elements of the column having multiline elements using classes property of colModel. For example is you would use classes: "textInDiv" the <td> of the cell in the corresponding column will get the class attribute. Because you have different hierarchy of elements inside of grid and inside of View form you can specify different restrictions of the height on both cases:

{name: "Description", edittype: "textarea", classes: "textInDiv",
    formatter: function (v) {
        return '<div>' + $.jgrid.htmlEncode(v) + '</div>';
    }}

and

tr.jqgrow>td.textInDiv>div {
    max-height: 20px;
    overflow: auto
}
td.form-view-data>span>div {
    max-height: 150px;
    overflow: auto
}

The demo demonstrate the results. How you can see on the following pictures the max-height for the cell contain is different for grid and the View form:

这篇关于如何仅限制网格中的jqgrid textarea高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！