JqGrid之表头文字列换行-yellowcong

Jqgrid实现表格的换行操作，实现主要有三步骤，1、添加css样式，2、设定grid固定宽度，

shrinkToFit:false,

不自动根据比例，3、添加

<br/>

标签，进行换行操作

实现效果

1、添加样式

th.ui-th-column div{
white-space:normal !important;
height:auto !important;
padding:0px;
}

2、创建jqgrid

创建的时候，给需要换行的字符，加上

<br/>

标签，这样就可以自动换行了

function createGrid(){

var colNames = [
"doub<br/>人物",
"im是<br/>三炮",
"you真的是三炮ma",
"yes/no",
"我<br/>不是",
];

var colModel = [
{name:"grdGoukei",sortable:false,width:80, hidden:false},
{name:"grdTokyu",sortable:false,width:80, hidden:false},
{name:"grdAddUser",sortable:false,width:80, hidden:false},
{name:"grdUpdDate",sortable:false,width:80, hidden:false},
{name:"grdInfo",sortable:false,width:80, hidden:false},
];

var dataList = [];
var gridHeight  = Math.floor($(this).innerHeight() * 0.8);

$("#gbox_gridHyoteiData").remove();
$("#wfgs1021HyoteiData").append("<table id='gridHyoteiData'></table>");
$('#gridHyoteiData').jqGrid({
data: dataList,
datatype:"local",
multiboxonly:true,
cellEdit:false,
cellsubmit:'clientArray',
colNames:colNames,
colModel:colModel,
width:"100%",
height:gridHeight,
scrollOffset:0,
rowNum:dataList.length,
gridview: true,
scroll:false,
shrinkToFit:false,
regional:'ja',
cmTemplate: {
resizable:false,
sortable: false
},
onSelectRow:function(rowid, status){
}
});

}

实现效果