如何仅显示jqgrid中多行文本单元格的第一行? [英] How to show only first line of a multi-line text cell in a jqgrid?

问题描述

我有一个jqgrid，如下所示:

I have a jqgrid as shown:

如您所见，行可以包含多行文本，也可以只有一行.但是，我只希望第一行如果具有多行文本，则在每行上显示一个向下的箭头.网格不可编辑.

As you see, rows can have multi-line text or just a single line. However, I only want the first line to be displayed on each row with a downward pointed arrow if it has multi-line text.The grid is non-editable.

此外，用于填充此网格的数据来自控制器的json字符串.目前，我已将网格参数设置为:

Moreover , the data to populate this grid comes as a json string from the controller. Currently, I have set the grid parameters as:

datatype: 'jsonstring',
datastr: jsonErrorGridData,
rowNum: '',
gridview: true,
onSelectRow: function (row_id) {
        $("#errorList-grid").toggleSubGridRow(row_id);
    }

这为我提供了一个包含所有行(rowNum: '')的网格，在某些情况下可能超过1000.此外，如何在客户端实现分页，还包括下载所有网格数据的选项? 另外，如您所见，列标题未正确对齐.我将这个网格显示为div中的弹出对话框:

This gives me a grid with all rows (rowNum: ''), which in cases can be more than 1000. Additionally, how can I implement paging on client side and also include an option to download all the gird data? Also, as you can see the column headers are not aligned properly. I display this grid as a pop-up dialog in a div:

<div id="displayError">
    <table id="errorList-grid" style="table-layout: fixed"></table>
</div>

推荐答案

实现几乎准确的要求的最简单方法是使用以下CSS规则:

The most easy way to implement almost exact your requirements would be the usage of the following CSS rule:

.ui-jqgrid .jqgrow:not(.ui-state-highlight) > td { white-space: nowrap; }

它将对所有未选择的行应用white-space: nowrap;，这将减小行的高度.所选行仍将具有默认的white-space: pre;属性，因此将显示整行.

It will apply white-space: nowrap; on all non-selected rows, which will reduce the height of the rows. The selected row will still have default white-space: pre; property and thus the full row will be shown.

这篇关于如何仅显示jqgrid中多行文本单元格的第一行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！