介绍
angular-app-grid 是一个使用 Angular 框架构建的高性能表格组件。它支持大数据量展示、排序、过滤、分页和搜索等功能。该 npm 包的使用可以极大地简化前端开发的工作量，并提高开发效率。
安装
可以使用 npm 进行包的安装：
--- ------- ----------------
使用
在 Angular 应用中引入模块：
------ - -------------------- - ---- ------------------- ----------- --- -------- ---------------------- ---- --- --
在 HTML 模板中使用：
----------------- ----------------- -------------------------------------------
参数
gridData
类型：Array
描述：表格数据的数组。
gridColumns
类型：Array
描述：表格列的配置项。
------ --------- ---------- - ------ ------- -- ----------- ------- ------- -- ---- ------- ------- -- -- ---------- -------- -- ----- ------------ -------- -- ----- ---------- -------- -- ----- --------------- --------------- -- ------ -
gridOptions
类型：GridOptions
描述：表格的配置项。
------ --------- ----------- - -------------- -------- -- ---------- ---- --------------------- -------- -- ------------ ---- -------------- ------- -- ------------ -- -------- ------- -- ---------- ---------- ------- -- ----------- ---------- ------- -- ----------- -
子组件
pbl-ngrid-cell
类型：ng-template
描述：用于自定义单元格的展示格式。
------------------
------------ -------------- ------------- --------------
---- ---- ------ ---- -------- ---- ---
--------------
-------------------事件
onRowClick
类型：EventEmitter
描述：表格行被点击时触发的事件。
----------------- -------------------------------------------------------
onRowDblClick
类型：EventEmitter
描述：表格行被双击时触发的事件。
----------------- ----------------------------------------------------------------
onCellClick
类型：EventEmitter
描述：表格单元格被点击时触发的事件。
------ --------- ------------- - ---- ---- -- --- ------- ----------- -- ---- ------------ ------------ -- --- ---- -- -
----------------- ---------------------------------------------------------
onCellEdit
类型：EventEmitter
描述：表格单元格进入编辑模式时触发的事件。
----------------- -----------------------------------------------------
onCellSave
类型：EventEmitter
描述：表格单元格保存编辑结果时触发的事件。
----------------- -----------------------------------------------------
onCellCancel
类型：EventEmitter
描述：表格单元格取消编辑时触发的事件。
----------------- ---------------------------------------------------------
示例代码
------ - --------- - ---- ----------------
------ - ---------- - ---- -------------------
------------
--------- ---------
--------- -
----------------- ----------------- ----------------------- -----------------------------------------------------
-
--
------ ----- ------------ -
---- - -
- ----- ----- ------ --------- --------- ---------- ------ ------------ --
- ----- ---- ----- --------- ----- --------- ------ ------------ --
- ----- ----- ------- --------- -------- --------- ------ ------------ --
- ----- ------ ------ --------- --- ---------- ------ ------------ --
- ----- ---- ---- --------- -------- ----------- ------ ------------ --
--
-------- ------------ - -
- ------ ------- ------- ------- ------ ------ --------- ----- ----------- ---- --
- ------ ----------- ------- ----------- ------ ------ --------- ----- ----------- ---- --
- ------ -------- ------- -------- ------ ------ --------- ----- ----------- ---- --
--
----------------- ---- -
---------------- ------------------------ -- ----------
-
-总结
angular-app-grid 是一个非常实用的 Angular 表格组件，可以帮助开发者轻松构建高性能、可定制的表格。本文详细介绍了组件的参数、事件以及示例代码，希望对大家学习和使用有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562de81e8991b448e0570