easyui datagrid 是 jQuery EasyUI 里面核心表格组件，增删改查也就是 CRUD，整套操作核心逻辑是前端 datagrid 负责表格渲染选中行弹窗表单，通过 ajax 跟后端接口交互，后端完成数据库新增修改删除查询之后返回 json 结果，前端再调用 reload 方法刷新表格数据。很多新手做这个功能容易踩坑，比如没有获取选中行 id，删除之后忘记刷新表格，新增和编辑共用一套弹窗但是表单数据没有清空，还有 url 参数传错导致后端接收不到数据，这套流程掌握之后，所有后台管理系统的列表页面都可以复用这个模板，datagrid 本身只负责展示，真正的数据变更全部交给后端接口处理，前端只做交互和数据回显。

基础准备清单

1 引入依赖文件 jQuery easyui 核心 js easyui css 语言包

2 准备页面元素 datagrid 表格标签 新增编辑弹窗 dialog 表单 form

3 后端准备四个接口 查询列表 新增保存 修改保存 删除

核心配置表格初始化

增删改查分步操作

查询操作

页面加载的时候自动初始化 datagrid，通过 url 发送请求，后端返回标准 json 格式，包含 total 和 rows 两个字段，datagrid 自动渲染分页和表格数据，也可以写查询按钮，点击之后修改 queryParams 参数，调用 load 方法带上筛选条件重新查询。

新增操作

点击新增按钮，打开 dialog 弹窗，调用 form 的 clear 方法清空表单，保存按钮绑定 ajax 请求，把表单序列化之后发送到新增接口，请求成功之后关闭弹窗，执行 datagrid reload 刷新表格。

修改操作

点击编辑按钮，先用 getSelected 拿到当前选中行，如果没有选中行就弹出提示，请选择要修改的数据，拿到选中行 id 之后，把该行数据填充进 form 表单，打开弹窗，保存的时候提交到修改接口，成功之后关闭弹窗并 reload 刷新表格。

删除操作

点击删除按钮，同样先判断是否选中行，拿到选中记录 id，弹出确认提示框，用户确认之后 ajax 调用删除接口，成功之后 reload 刷新表格，删除支持单行删除，也可以改成 getSelections 批量删除，把多个 id 拼接传给后端。

关键代码要点

1 后端返回 datagrid 固定格式 total 总记录数 rows 当前页数据数组

2 表单提交推荐使用 easyui form 的 submit 方法，自带序列化

3 所有操作都要做异常判断，接口失败的时候弹出错误提示

4 编辑回显的时候注意字段名要和 datagrid 列 field 名称保持一致

【常见问题】

问题 1 easyuidatagrid 增删改查操作执行完为什么表格数据不更新

回答 1 绝大多数原因是 easyuidatagrid 增删改查操作成功回调里面没有调用 reload 方法，接口虽然修改数据库成功，但是前端表格仍旧保留旧数据，必须在 ajax 成功回调里面执行 datagrid reload 刷新

问题 2 easyuidatagrid 增删改查操作编辑的时候获取不到选中行 id 怎么办

回答 2 easyuidatagrid 增删改查操作编辑依赖 getSelected 方法，获取不到选中行一般是用户没有选中表格行，或者 datagrid 没有开启单选配置，需要增加前置判断，未选中的时候给出提示

问题 3 easyuidatagrid 增删改查操作后端返回数据格式错误会怎么样

回答 3 easyuidatagrid 增删改查操作要求查询接口必须返回 total 和 rows 标准结构，如果字段名称不对，datagrid 会渲染空白表格，分页也会失效，需要核对后端 json 返回字段

【免责申明】

本内容为 easyui datagrid 前端开发学习参考，不同版本 easyui api 存在细微差异，实际项目请结合所用版本和后端框架调整代码。