ag-grid中文教程

ag-grid setRowData重新设置表格行数据

ag-grid setRowData重新设置表格行数据,如果我们想通过自己定义的ajax方法更新行数据(会清除原因数据),这时就需要用到setRowData方法。

setRowData重新设置表格行数据

//重新设置表格数据**************************************
function reset() {
    gridOptions.api.setRowData([{ id: 1, name: 'it小书童', url: 'www.itxst.com', catalog: '软件' }]);
}
//定义列
var columnDefs = [
    { headerName: '', checkboxSelection: true, headerCheckboxSelection: true, width: 50, 'pinned': 'left' },
    {
        headerName: '网站名称', field: 'name', filter: 'agTextColumnFilter', 'pinned': 'left', width: 100,
    },
    { headerName: '网址', field: 'url' },
    { headerName: '行业', field: 'catalog', filter: 'agNumberColumnFilter' }
];

//表格数据
var rowData = [
    { id: 1, name: '网易', url: 'www.163.com', catalog: '门户' },
    { id: 2, name: 'QQ', url: 'www.qq.com', catalog: 'IM' },
    { id: 3, name: '微软', url: 'www.microsoft.com', catalog: '软件' }
];

//aggrid设置
var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    rowSelection: 'multiple',
    rowMultiSelectWithClick: true,
    suppressCellSelection: true
};


//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    agGrid = new agGrid.Grid(eGridDiv, gridOptions);
});

在线试一试

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