ag-grid中文教程

ag-grid设置行高列宽

ag-grid设置表格的行高和列的宽,表头的高度。

ag-grid设置行高

var gridOptions = {
        rowHeight :30, //设置行高为30px,默认情况下是25px ******************
        columnDefs: columnDefs,
        rowData: data,
        rowSelection: 'multiple',
        rowMultiSelectWithClick: true,
        suppressCellSelection: true
 };

ag-grid动态设置行高

var gridOptions = {
        rowHeight :30, //设置行高为30px,默认情况下是25px
        columnDefs: columnDefs,
        rowData: data,
        rowSelection: 'multiple',
        rowMultiSelectWithClick: true,
        suppressCellSelection: true
 };
 
//与列对应的数据
var data = [
    { id: 1, name: '张三', sex: '男', age: 100, 'sr': 1918 },
    { id: 2, name: '李四', sex: '女', age: 5, 'sr': 2000 }, 
    { id: 10, name: 'itxst.com', sex: '男', age: 35, 'sr': 2018 }
];

//设置单行选中
var gridOptions = {
    rowHeight :30,
    columnDefs: columnDefs,
    rowData: data
};
//表格对象
var ag;
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    ag=  new agGrid.Grid(eGridDiv, gridOptions);
});
//动态设置行高 重新设置为100px
function setHeight()
{
ag.gridOptions.rowHeight=100;
ag.gridOptions.api.resetRowHeights();
}

ag-grid设置列宽

//设置列宽
var columnDefs = [ 
   {
         headerName: '姓名', field: 'name', filter: 'agTextColumnFilter',
         'pinned': 'left', 
         width: 100, //把姓名列设置为100px ******************
    },
    { headerName: '性别', field: 'sex' },
    { headerName: '年龄', field: 'age', filter: 'agNumberColumnFilter' },
    { headerName: '生日', field: 'sr', filter: 'agNumberColumnFilter' }
];

ag-grid设置表头的高度

 //设置表头的高度
  var gridOptions = {
            headerHeight:60, //设置表头的高度 ******************
            rowHeight: 30,
            columnDefs: columnDefs,
            rowData: data,
            rowSelection: 'multiple',
            rowMultiSelectWithClick: true,
            suppressCellSelection: true
    };

在线试一试

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