JqGrid实现超长水平（左右）滚动条功能

使用JqGrid来实现列表功能非常方便快捷，但在使用的过程中还会遇到一些定制化的问题。这篇文章来跟大家说一下当列表中数据比较多时，如何实现水平（左右）滚动来确保能够查看完整的信息。

字段较少情况

在字段较少的情况，直接使用即可，无效做其他调整。下面贴一下简单的示例代码：

$(function () {
    $("#jqGrid").jqGrid({
        url: baseURL + 'biz/message/list',
        datatype: "json",
        colModel: [            
            { label: 'id', name: 'id', index: 'id', width: 50, key: true },
            { label: '标题', name: 'title', index: 'title', width: 80 },          
            { label: '内容', name: 'content', index: 'content', width: 80 },          
            { label: '类型', name: 'type', index: 'type', width: 80 ,
                formatter: function (value, options, row) {
                    if(value == '0'){
                        return '<span class="label label-success">定时</span>';
                    } else if(value == '1'){
                        return '<span class="label label-danger">手动</span>';
                    }
                }},
            { label: '状态', name: 'status', index: 'status', width: 80 ,
                formatter: function (value, options, row) {
                    if(value == '0'){
                        return '<span class="label label-success">待发送</span>';
                    } else if(value == '1'){
                        return '<span class="label label-default">已发送</span>';
                    }
                }},
            { label: '创建时间', name: 'createTime', index: 'create_time', width: 80 },             
            { label: '更新时间', name: 'updateTime', index: 'update_time', width: 80 }          
        ],
        viewrecords: true,
        height: 385,
        rowNum: 10,
        rowList : [10,30,50],
        rownumbers: true, 
        rownumWidth: 25, 
        autowidth:true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page", 
            rows:"limit", 
            order: "order"
        },
        gridComplete:function(){
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
        }
    });
});

默认情况下没有开启水平滚动条，无论有多少字段，都会显示在这一屏，字段比较少时无影响。但字段一旦多了，问题就出来了。此种情况下，jqGrid显示的内容的列宽并没有按照设置的列宽显示。列被压缩。则按比例初始化列宽度。

字段较多情况

针对字段较多的情况，官方提供了两个属性来进行解决。

shrinkToFit:false, 
autoScroll: true,

shrinkToFit：用来说明当初始化列宽度时候的计算类型，如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度。默认值为true。

autoScroll：如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth。

了解了这两个属性的值之后，我们就可以对上面的代码进行重新修改，以满足需求。

$(function () {
    $("#jqGrid").jqGrid({
        url: baseURL + 'biz/message/list',
        datatype: "json",
        colModel: [            
            { label: 'id', name: 'id', index: 'id', width: 50, key: true },
            { label: '标题', name: 'title', index: 'title', width: 80 },          
            { label: '内容', name: 'content', index: 'content', width: 80 },          
            { label: '类型', name: 'type', index: 'type', width: 80 ,
                formatter: function (value, options, row) {
                    if(value == '0'){
                        return '<span class="label label-success">定时</span>';
                    } else if(value == '1'){
                        return '<span class="label label-danger">手动</span>';
                    }
                }},
            { label: '状态', name: 'status', index: 'status', width: 80 ,
                formatter: function (value, options, row) {
                    if(value == '0'){
                        return '<span class="label label-success">待发送</span>';
                    } else if(value == '1'){
                        return '<span class="label label-default">已发送</span>';
                    }
                }},
            { label: '创建时间', name: 'createTime', index: 'create_time', width: 80 },             
            { label: '更新时间', name: 'updateTime', index: 'update_time', width: 80 }          
        ],
        viewrecords: true,
        height: 385,
        rowNum: 10,
        rowList : [10,30,50],
        rownumbers: true, 
        rownumWidth: 25, 
        autowidth:true,
        multiselect: true,
        // 新增的部分
        shrinkToFit:false, 
        autoScroll: true, 
        pager: "#jqGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page", 
            rows:"limit", 
            order: "order"
        }
    });
});

当使用上述代码完成调整之后，还需要做的一件事就是将每列数据的width值进行大小的调整，以适合具体的展示效果。

在上述实例中，针对列表还展示了formatter对应函数用来格式化具体数据项的操作，大家也可以进行参考。