ag-grid中文教程

通过拖动改变ag-grid列宽度和移动列位置

通过拖动鼠标改变ag-grid列宽度和列的位置。

ag-grid拖动宽度

var gridOptions = {
    columnDefs: columnDefs,
    rowData: data,
    onGridReady: function () {
        gridOptions.api.sizeColumnsToFit(); 
    },
    defaultColDef: {  
        resizable: true,//是否开启调整列大小,就是拖动改变列大小
    }        
};

ag-grid拖动列的位置

var gridOptions = {
    columnDefs: columnDefs,
    rowData: data,
    onGridReady: function () {
        gridOptions.api.sizeColumnsToFit(); 
    },
    defaultColDef: {  
       lockPosition: false //禁止拖动列的位置
    }        
};

在线试一试

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全部事件列表