一步步实现 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;
}

显示效果如下图:

一步步实现 easyui datagrid表格宽度自适应,效果非常好_第1张图片

 

你可能感兴趣的:(一步步实现 easyui datagrid表格宽度自适应,效果非常好)