因为该组件功能强大,g-grid几乎能满足你对数据表格所有需求,所以分出一篇文章重点来讲一下,今天打算讲一下他的非常好用的一些技巧,
二话不说放上链接 Ag-grid中文文档:点击进入https://www.ag-grid.com
Ag-grid中文文档:点击进入https://www.itxst.com/ag-grid/tutorial.html
前面我已经介绍了基本的使用,以及常用的属性 ,可以见我上一篇文章 点击进入
今天要将的点
大家根据我的注释也能看出来这些地方需要再哪使用,
这个功能是一个非常实用的功能,相信很多小伙伴都遇到这样的问题,使用传统的表格组件,这个时候传统组件就不能满足我们的需求了。
那么我是怎么利用ag-grid是怎么解决的呢,
需要用到的就是他本身的一个属性
这个函数会在表格初始化的时候触发,然后自带一个属性,
其中最重要的 params.api
。
方法
作用
params.api.getColumnDefs()
用于获取当前表格的列定义。它返回一个包含所有列定义的数组。这在需要动态访问或修改列定义时非常有用
params.api.setRowData(myRowData)
设置或更新网格的数据
params.api.updateRowData({ add: newItems });
更新网格中的数据,例如添加、更新或删除行
params.api.refreshCells({ force: true });
刷新网格的单元格。
params.api.redrawRows();
重新绘制指定的行
params.api.getSelectedRows()
获取选中的行数据
params.api.selectAll()
选择所有行
params.api.sizeColumnsToFit();
调整列宽度以适应网格宽度
params.api.paginationGoToNextPage()
跳转到下一页
params.api.deselectAll();
取消选择所有行
其中具体的使用方法可以查看官网,今天要使用到的是
如果需要在浏览器拖动,缩小放大的过程中也进行一个自动自适应可以加入下面这行代码