IT小书童 我的代码收藏工具

Ant Design Vue Breadcrumb 面包屑组件

Ant Design Vue Breadcrumb 面包屑导航组件,通过这个组件可以告诉用户,当前所在的路径和当前位置,使用方法比较简单。

Ant Design Vue Affix 固钉固定内容元素

Affix 固钉可以把内容元素固定在顶部或者顶部,当网页内容很长超过一屏滚动时固定在指定的位置。

Navigation

Navigation

Ant Design Vue Button按钮

Ant Design Vue Button按钮

ag-grid全部事件列表

ag-grid全部事件列表

ag-grid编辑表格实现可编辑行和单元格

我们在使用表格时有时会想像excel双击单元格实现数据可编辑,ag-grid也提供了编辑单元格的功能,社区免费版提供了输入框、下拉列表、文本域(大输入框)基础的可编辑控件,企业版则提供了自定义编辑控件功能。

ag-grid onCellClicked单击单元格事件

ag-grid onCellClicked单击单元格事件的方法。

ag-grid onCellDoubleClicked双击单元格事件

ag-grid onCellDoubleClicked 双击单元格事件的方法,可以应用在双击编辑单元格等场景上。

ag-grid onRowClicked行点击事件

用户点ag-grid表格时响应的事件,返回点击的行数据和鼠标事件。

ag-grid单元格焦点相关方法getFocusedCell setFocusedCell

ag-grid单元格getFocusedCell setFocusedCell方法

ag-grid设置客户端排序sort

ag-grid客户端排序,点击列头进行升序降序或者按自己的要求进行自定义排序。

ag-grid refreshCells刷新更新数据

我们通常会遇到这样一个情景,选中表格中的一行点击编辑,弹出对话框修改完数据后更新表格选中行的数据,ag-grid可以通过refreshCells方法来更新表格显示的数据。

ag-grid forEachNode遍历行对象

ag-grid forEachNode方法遍历行对象,参数为回调方法,执行回调方法时会传入node行节点对象和index当前索引,类似js的数组的forEach方法。

ag-grid rowGroup行组

ag-grid rowGroup行组可以对行分组,这是非常有用的一个功能,可惜只有企业版才有。

ag-grid getRowNode获取行对象

ag-grid getRowNode获取行对象,行对象包含行原始数据、行高等各种属性。

ag-grid getPinnedBottomRow获取底部合计行对象

ag-grid getPinnedBottomRow获取底部合计行rowNode对象,行对象结构如下。

ag-grid getPinnedTopRowCount获取置顶行数量

ag-grid的getPinnedTopRowCount方法获取置顶行数量,返回对象为rowNode对象,行对象结构如下。

ag-grid setPinnedBottomRowData设置表格底部行汇总行统计行

在底部设置一行固定行进行数据汇总是一个非常见的需求,ag-grid可以通过setPinnedBottomRowData方法简单的就实现该功能。

ag-grid setPinnedTopRowData设置表格置顶行汇总行

有时我们需要在表格顶部设置一行置顶行进行汇总,这时我们可以通过ag-grid setPinnedTopRowData设置表格置顶行汇总行。

ag-grid pinnedBottomRowData 把行数据固定在底部

ag-grid可以通过pinnedBottomRowData把一行或者多行数据固定在表格的底部,注意这些行不能选中、排序、刷选和分组。