angular实现表格的增删改查

时间:2024-03-14 14:43:30

做后台管理系统的时候,增删改查几乎是必备的,以前没学angular的时候,一直觉得操作dom非常麻烦,了解angular后发现做起来非常的方便

下载地址:https://pan.baidu.com/s/1mjsLdkG
提取密码:iheh

增删改查都只是模拟的, 只涉及前端,数据没有持久化,刷新一下就没有了。

angular实现表格的增删改查

1.删除
选中行后点 删除 按钮进行删除

2.添加
点击添加按钮就会多出一行,选中行,点击 提交添加 持久化到数据库

angular实现表格的增删改查

3.修改
选中一行,点击修改按钮,弹出模态框进行编辑,点击保存后持久化到数据库,点击关闭放弃保存

angular实现表格的增删改查

4.菜单
菜单按钮是用选择需要展示的列的,当列过多的时候,可以屏蔽掉部分不想看到的列

angular实现表格的增删改查