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){
            }
        });

}

实现效果