版权声明：本文为博主原创文章，转载请注明出处！ https://blog.csdn.net/chuangxin/article/details/88898823
jqgrid单元格默认不换行，超出部分被隐藏，鼠标移上去会显示全部内容，原因是单元格设置了overflow:hidden和title属性。我们可以通过colModel的classes属性，给列设置class改变jqgrid单元格默认显示样式。比如单元格内容强制换行，单元格内容超出部分用省略号显示，具体实现如下：
1、jqGrid参考手册关于colModel classes属性描述
| Property | Type | Description | Default |
|---|---|---|---|
| classes | string | This option allow to add classes to the column. If more than one class will be used a space should be set. By example classes:‘class1 class2’ will set a class1 and class2 to every cell on that column. In the grid css there is a predefined class ui-ellipsis which allow to attach ellipsis to a particular row. Also this will work in FireFox too. | empty string |
2、给colModel设置classes
定义2个自定义class：
.text-ellipsis {
white-space: nowrap;
text-overflow : ellipsis;
}
.text-break{word-break: break-all; white-space: normal!important}
列模型colModel设置如下：
colModel: [
...
{label: "零件描述(原生显示)", name: "lj_desc", width: 150},
{label: "零件描述(超出部分省略号)", name: "lj_desc", classes: "text-ellipsis", width: 150},
{label: "车型描述(强制换行)", name: "cx_desc", classes: "text-break", width: 150},
完整案例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jggrid-classes</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.css" />
<link rel="stylesheet" href="https://js.cybozu.cn/jqgrid/v5.3.1/css/ui.jqgrid.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://js.cybozu.cn/jqgrid/v5.3.1/js/jquery.jqGrid.min.js"></script>
<script src="https://js.cybozu.cn/jqgrid/v5.3.1/js/i18n/grid.locale-en.js"></script>
<style type="text/css">
.text-ellipsis {
white-space: nowrap;
text-overflow : ellipsis;
}
.text-break{word-break: break-all; white-space: normal!important}
</style>
</head>
<body>
<div class="page-content container">
<div class="page-body"> <!-- page-body -->
<div class="panel panel-default" id="panel-orders">
<table id="orders"></table>
</div>
</div>
</div>
<script type="text/javascript">
var data = [], rowIds = [];
function getBills() {
var rowCount = 10;
for (var i = 0; i < rowCount; i ++) {
data.push({
goods_no: i + 1,
goods_name: '零件名称' + rowCount + i,
car_type_name: '车型' + rowCount + i,
package_name: '包装器具' + rowCount + i,
pihao: '20190329' + i,
lj_desc: '零件描述，A零件B零件C零件A零件B零件C零件' + i,
cx_desc: '车型描述，A车型B车型C车型A车型B车型C车型' + i,
})
}
$("#orders").jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
}
$(function() {
$("#orders").jqGrid({
colModel: [
{label: "零件号", name: "goods_no", width: 60},
{label: "零件名称", name: "goods_name", width: 180},
{label: "车型", name: "car_type_name", width: 70},
{label: "批号", name: "pihao", width: 70, },
{label: "零件描述(原生显示)", name: "lj_desc", width: 150},
{label: "零件描述(超出部分省略号)", name: "lj_desc", classes: "text-ellipsis", width: 150},
{label: "车型描述(强制换行)", name: "cx_desc", classes: "text-break", width: 150},
],
datatype: 'local',
rownumbers: true,
height: 300,
rowNum: 1000,
});
getBills();
});
</script>
</body>
</html>