一步步實現 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;
}

顯示效果如下圖：