ag-grid中文教程

ag-grid setColumnDefs新增列重新设置列

ag-grid setColumnDefs新增一列或者重新设置所有的列。

setColumnDefs方法

 //重新设置列
 columnDefs.push({ headerName: '地址', field: 'dz' });
 gridOptions.api.setColumnDefs(columnDefs);
 //调整表格大小自适应
 gridOptions.api.sizeColumnsToFit();

在线试一试 

完整代码

//定义列
var columnDefs = [
    { headerName: '姓名', field: 'name' },
    { headerName: '性别', field: 'sex' },
    { headerName: '年龄', field: 'age' },
];

//对应的数据
var data = [
    { name: 'itxst.com', sex: '男', age: '100', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路1号' },
    { name: '李四', sex: '女', age: '15', 'jg': '中国', 'sf': '江苏', 'dz': '苏州市寒山寺' },
    { name: '张三', sex: '男', age: '22', 'jg': '中国', 'sf': '山东', 'dz': '青岛市' },
    { name: '张三', sex: '女', age: '16', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路111号' },
    { name: '张三', sex: '女', age: '32', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
    { name: '张三', sex: '男', age: '37', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
    { name: 'bill', sex: '男', age: '31', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }
];

//ag-grid设置
var gridOptions = {
    columnDefs: columnDefs,
    rowData: data,
    onGridReady: function () {
        //创建完成执行的事件
        gridOptions.api.sizeColumnsToFit();
    },
    defaultColDef: { 
        enablePivot: true,
        enableValue: true,
        sortable: true, //开启排序
        resizable: true,//是否可以调整列大小,就是拖动改变列大小
        filter: true  //开启刷选
    },
    pagination: true,  //开启分页(前端分页)
    paginationAutoPageSize: true, //根据网页高度自动分页(前端分页)

};
//初始化agGrid
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
});
//新增地址列
function add() {
    columnDefs.push({ headerName: '地址', field: 'dz' });
    gridOptions.api.setColumnDefs(columnDefs);
    //调整表格大小自适应
    gridOptions.api.sizeColumnsToFit();
}
Catalog
ag-grid中文教程 ag-grid vue ag-grid vue入门教程 umd浏览器版用法 vue全选反选 vue插入数据新增行 常用功能 ag-grid多表头 ag-grid固定列 ag-grid拖动宽度和位置 ag-grid数据刷选器 ag-grid编辑表格 ag-gird设置 ag-grid定义列 ag-grid 定义列宽 ag-grid设置行高列宽 ag-grid设置选择行 ag-grid设置复选框 ag-grid置顶合计行 ag-grid底部合计行 ag-grid行组 ag-grid客户端排序 ag-grid方法 setRowData重设表格行数据 ag-grid增加删除修改行 ag-grid全选反选 sizeColumnsToFit自适应大小 setColumnDefs新增列 setRowData插入新行 setPinnedTopRowData设置置顶行 setPinnedBottomRowData设置底部汇总行 forEachNode遍历行对象 getPinnedTopRowCount置顶行数 getPinnedBottomRow底部合计 getRowNode获取行对象 refreshCells刷新更新数据 ag-grid单元格焦点 ag-grid事件 onRowClicked行点击事件 onCellClicked单击单元格事件 onCellDoubleClicked双击单元格事件 ag-grid全部事件列表