一步步实现 easyui datagrid表格宽度自适应，效果非常好

一步步实现 easyui datagrid表格宽度自适应，效果非常好：

一、设置公共方法，使得datagrid的属性  fitColumns:true

$(function(){
　　//初始加载，表格宽度自适应
    $(document).ready(function(){
        fitCoulms();
    });
　　//浏览器窗口大小变化后，表格宽度自适应
    $(window).resize(function(){
        fitCoulms();
    });
})

//表格宽度自适应，这里的#dg是datagrid表格生成的div标签
function fitCoulms(){
    $('#dg').datagrid({
        fitColumns:true
    });
}

 

二、在$('#dg').datagrid中设置columns的各列宽度比例

当 fitColumns:true时，columns里的width变为改列宽度占表格总宽度大小的比例，而不是实际宽度

下面例子中，各列的宽度大小比为：250:200:110:114

//    视频广告数据统计的表格数据渲染
    $('#frequencyDg').datagrid({
        scrollbarSize:0,
        method : 'get',
        loadMsg: '正在加载中，请稍等... ',
        nowrap:false,//允许换行
        fitColumns:true,//宽度自适应
        emptyMsg: '无记录',
        onLoadSuccess : function(data) {// Fires when data is
            var classify = $("#classify").val();
            $('#frequencyPp').pagination('refresh', {
                total : data.total,
                pageNumber : data.page,
                classify:classify
            });
        },
        columns:[[
            {
                field:'name',
                title:'广告名称',
                width:250, //当 fitColumns:true时，columns里的width变为改列宽度占表格总宽度大小的比例
                align:'center'
            },          
            {
                field:'startTime',
                title:'投放日期',
                width:200,
                align:'center'
            },
            {
                field:'playCount',
                title:'播放次数',
                width:110,
                align:'center',
                editor:'text'
            },
            {
                field:'userSawTimes',
                title:'用户观看次数',
                width:144,
                align:'center',
                editor:'text'
            }
        ]]
    });

 

三、将body设置为min-width:1100px。使得datagrid表格宽度大于浏览器宽度时，下面可以出现横向滚动条，可以横向拉动看到整个datagrid数据。

body{
    padding: 0;
    margin: 0;
    border: 0;
    min-width: 1100px;
    box-sizing: border-box;
    font-size: 14px;
}

显示效果如下图：