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

本文介绍如何利用ag-grid的setRowData方法,结合自定义的AJAX请求,来更新并替换表格的行数据,实现数据的动态刷新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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几乎能满足你对数据表格所有需求。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值