一步步实现 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: '<span>无记录</span>',
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;
}

显示效果如下图：