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

问题描述

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

来自 属性.例如，您将使用 classes: "textInDiv" 对应列中单元格的 <td> 将获得类属性.因为您在网格内部和视图表单内部具有不同的元素层次结构，您可以在两种情况下指定不同的高度限制:

{name: "Description", edittype: "textarea", classes: "textInDiv",格式化程序:函数(v){返回'<div>'+ $.jgrid.htmlEncode(v) + '</div>';}}

和

tr.jqgrow>td.textInDiv>div {最大高度:20px；溢出:自动}td.form-view-data>span>div {最大高度:150px；溢出:自动}

演示展示了结果.您如何在以下图片中看到单元格包含的 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屋！