表格开发示例
BuildAdmin的表格二次开发示例
介绍
本模块为系统安装大量的表格相关示例,其中包括:
编程式操作示例
- 全选/取消全选
- 选中/取消选中某行
- 以某字段排序
- 清空排序条件
- 改变每页显示条数
- 动态修改单元格值
- 刷新表格
- 翻页
- 触发公共搜索
- 隐藏/显示列
- 隐藏/显示操作按钮
- 禁止/允许某行可以被选中
- 获取选中行
表格事件监听示例
- 获取表格数据前后钩子
- 请求删除前后钩子
- 请求编辑前后钩子
- 双击单元格前后钩子
- 表单切换前后钩子
- 表单提交前后钩子
- 表格内部事件:
选中项改变、每页数量改变、页码改变、排序了、编辑、删除、单元格值改变、公共搜索提交
- 表头事件:
刷新、编辑、删除、快速查询提交、折叠/展开、调整列显示状态
- 表格初始化前
- 鼠标移入某单元格
- 鼠标移出某单元格
- 单元格被点击
- 单元格被右击
- 某行被点击
- 某行被右击
- 某行被双击
- 表头被点击
- 表头被右击
- 表头宽度被改变
- ....
表格使用示例
- 增加详情按钮和弹窗
- 带参自动公共搜索
- 自定义表头按钮
- 固定列固定表头
- 表尾合计行
- 带状态表格
- 多级表头
- 合并行或列
- 展开行
- 树形数据
- 树状表格(类似后台菜单规则管理)
- 数据编辑之前预处理
- 数据提交之前预处理
- 添加表单的默认值设置
- 表格表单中的远程下拉联动
- 单元格自定义渲染
- 公共搜索输入框自定义渲染
- 公共搜索输入框使用远程下拉和联动
温馨提示
- 仅树形数据为方便示例动了模型文件,其余示例的服务端均为
CRUD
生成,所以本模块主要是前端表格示例,而不是全栈的示例
更新日志
v1.0.4
增加示例项、优化代码- 优化前后置钩子的使用示例
- 优化细节
- 新增
表格表单 > 远程下拉联动
示例 - 新增
公共搜索 > 自定义渲染
示例 - 新增
公共搜索 > 远程下拉联动
示例
v1.0.3
优化细节- 优化细节
v1.0.2
兼容至 v2.1.2无详细更新日志
v1.0.1
合并树状表格示例- 合并树状表格示例
- 优化细节
v1.0.0
首次发布无详细更新日志

妙码生花
这家伙很懒,什么也没写~
模块授权
正版授权,允许商业使用
自购买起一年内免费下载和升级更新
不加密源代码,私有部署,二开方便
可复制产品,不支持七天无理由退款
禁止转售、分享等任何形式的再分发
仅 BuildAdmin 后台管理系统可以使用
模块信息
模块价格
3积分
访问次数
24933
模块标识
tables
下载次数
2349
模块分类
实用案例
上次更新
2025-05-12 20:58:54
开发者主页
-
购买送积分
-
二开必备TypeScriptCRUD+
推荐模块
WebNuxt(SSR)
Workerman工程模块开发辅助内容管理系统(CMS)AI知识库(支持 DeepSeek)后台锁屏路由和后台选项卡示例数据导出数据导入短信发送md-editor-v3富文本编辑器第三方授权登录(Nuxt版本)Workerman在线客服系统工单系统问答社区系统wangEditor富文本编辑器七牛云存储会员交互扩展七牛云存储前端直传(Nuxt专用)阿里云对象存储OSS(Nuxt直传)md-editor-v3富文本编辑器(Nuxt版本)wangEditor富文本编辑器(Nuxt版本)通知公告管理通知消息开关最简树状表格示例省份城市地区数据命令行CRUD代码生成(旧版CRUD)