ag-grid width 定义列宽

ag-grid支持按像素和比例定义列宽，如果定义列时width表示按像素设置列的宽度，flex表示按比例定义宽度，flex优先级高于width。

width 按像素设置宽度

//定义表格列的宽度 width 注意是数字类型
var columnDefs = [
    { headerName: '城市',width:100, field: 'name'},
    { headerName: '详细地址',width:200, field: 'addr' } 
];

//与列对应的数据; 属性名对应上面的field
var data = [
    { name: '杭州', addr: '浙江省杭州市西湖区古墩路8号'},
    { name: '深圳', addr: '广东省深圳市福田区11号' }  
];

//将列和数据赋给gridOptions 
var gridOptions = { 
    columnDefs: columnDefs,
    rowData: data,
    onGridReady: function () {
         //表格创建完成后执行的事件 不设置列自适应大小
        //gridOptions.api.sizeColumnsToFit(); 
    },
    defaultColDef: {
        resizable: true,//是否可以调整列大小，就是拖动改变列大小
        filter: false  //开启刷选
    },
    pagination: true,  //开启分页（前端分页）
    paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）
            
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
});

在线试一试

flex 按比例设置宽度

//定义表格列的宽度 flex 注意是数字类型, 地址列是名称列宽度的3倍
var columnDefs = [
    { headerName: '城市',flex:1, field: 'name'},
    { headerName: '详细地址',flex:3, field: 'addr' } 
];

//与列对应的数据; 属性名对应上面的field
var data = [
    { name: '杭州', addr: '浙江省杭州市西湖区古墩路8号'},
    { name: '深圳', addr: '广东省深圳市福田区11号' }  
];

//将列和数据赋给gridOptions 
var gridOptions = { 
    columnDefs: columnDefs,
    rowData: data,
    onGridReady: function () {
         //表格创建完成后执行的事件 不设置列自适应大小
        //gridOptions.api.sizeColumnsToFit(); 
    },
    defaultColDef: {
        resizable: true,//是否可以调整列大小，就是拖动改变列大小
        filter: false  //开启刷选
    },
    pagination: true,  //开启分页（前端分页）
    paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）
            
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
});

在线试一试

width 按像素时最后一列自动填充表格

//width 按像素时最后一列自动填充表格,最后一列设置flex 1 即可
var columnDefs = [
    { headerName: '城市',width:100, field: 'name'},
    { headerName: '详细地址',flex:1, field: 'addr' } 
];

//与列对应的数据; 属性名对应上面的field
var data = [
    { name: '杭州', addr: '浙江省杭州市西湖区古墩路8号'},
    { name: '深圳', addr: '广东省深圳市福田区11号' }  
];

//将列和数据赋给gridOptions 
var gridOptions = { 
    columnDefs: columnDefs,
    rowData: data,
    onGridReady: function () {
         //表格创建完成后执行的事件 不设置列自适应大小
        //gridOptions.api.sizeColumnsToFit(); 
    },
    defaultColDef: {
        resizable: true,//是否可以调整列大小，就是拖动改变列大小
        filter: false  //开启刷选
    },
    pagination: true,  //开启分页（前端分页）
    paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）
            
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
});

在线试一试