前端行内编辑让数据维护回归到最直观的方式:直接点击表格中的单元格即可就地修改内容,修改完成后系统会即时保存,无需打开任何弹窗或跳转到后台。它特别适合那些频繁、零散的小改动,例如更正一个数字、调整一处文字或更新某条状态。
下面嵌入的是一个开启了行内编辑的实时数据表格。如果你是拥有相应权限的登录用户,可以尝试点击任意可编辑的单元格直接修改并观察即时保存的效果;未登录或无权限的访客则只能浏览数据。
前端行内编辑
| ID | 姓名 | 部门 | 职位 | 月薪 | 城市 | 在职 |
|---|---|---|---|---|---|---|
| 1 | 赵敏 | 人事部 | 专员 | 18,717.00 | 北京 | 1 |
| 2 | 钱进 | 财务部 | 高级工程师 | 17,343.00 | 武汉 | 1 |
| 3 | 孙悦 | 财务部 | 专员 | 14,463.00 | 深圳 | 1 |
| 4 | 周强 | 人事部 | 经理 | 27,194.00 | 武汉 | 0 |
| 5 | 吴磊 | 销售部 | 高级工程师 | 31,810.00 | 成都 | 0 |
| 6 | 郑爽 | 财务部 | 工程师 | 34,399.00 | 深圳 | 0 |
| 7 | 冯巩 | 研发部 | 主管 | 9,569.00 | 成都 | 0 |
| 8 | 陈坤 | 人事部 | 专员 | 35,795.00 | 深圳 | 0 |
| 9 | 褚明 | 研发部 | 专员 | 37,815.00 | 深圳 | 1 |
| 10 | 卫东 | 财务部 | 经理 | 27,164.00 | 深圳 | 0 |
| 11 | 蒋雯 | 财务部 | 工程师 | 30,740.00 | 深圳 | 1 |
| 12 | 沈腾 | 市场部 | 主管 | 34,676.00 | 成都 | 1 |
| 13 | 韩梅 | 销售部 | 高级工程师 | 11,924.00 | 成都 | 0 |
| 14 | 杨幂 | 销售部 | 专员 | 8,402.00 | 成都 | 0 |
| 15 | 朱军 | 研发部 | 专员 | 10,461.00 | 北京 | 1 |
| 16 | 秦岚 | 市场部 | 专员 | 29,531.00 | 成都 | 0 |
| 17 | 尤勇 | 研发部 | 工程师 | 14,914.00 | 上海 | 0 |
| 18 | 许晴 | 市场部 | 经理 | 44,187.00 | 上海 | 0 |
| 19 | 何炅 | 人事部 | 高级工程师 | 38,951.00 | 上海 | 1 |
| 20 | 吕燕 | 财务部 | 主管 | 31,135.00 | 成都 | 1 |
| 21 | 施特 | 财务部 | 主管 | 12,740.00 | 上海 | 0 |
| 22 | 张杰 | 研发部 | 工程师 | 37,116.00 | 上海 | 0 |
| 23 | 孔雪 | 人事部 | 专员 | 13,910.00 | 北京 | 1 |
| 24 | 曹operator | 研发部 | 专员 | 40,077.00 | 上海 | 1 |
| 姓名 | 部门 | 职位 | 月薪 | 城市 | 在职 |
- 在表格的编辑设置中启用「行内编辑」,开启后登录用户即可点击单元格直接修改、即时保存。
- 行内编辑比弹窗编辑更快捷,适合频繁的小修改;若涉及一次性填写多个字段,弹窗方式可能更合适。
- 该功能同样仅对有权限的登录用户可用,请按需为不同角色配置编辑权限,避免普通访客误改数据。
- 本页使用的短代码: