ag-grid setRowData重新設置表格行數據

ag-grid 通過setRowData重新設置表格行數據，如果我們想通過自己定義的ajax方法更新行數據（會清除原因數據），這時就需要用到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);
});

轉載請注明: http://www.itxst.com/ag-grid/tutorial.html

ag-grid是一款功能和性能強大外觀漂亮的表格插件，ag-grid幾乎能滿足你對數據表格所有需求.