咨询ZingGrid实现CRUD时调用本地API的方法及配套示例项目

基础请求机制说明 #

ZingGrid内置了完整的CRUD请求能力，开启编辑配置后会按照预设规则自动向指定端点发起对应操作的请求，不需要从零封装表格的交互触发逻辑，核心流程如下：

• 读操作（初始加载、分页、排序、筛选）：默认以GET方法调用组件src属性绑定的本地API地址，自动携带分页、排序、筛选的查询参数，解析返回的数组结构数据完成表格渲染
• 创建操作：用户提交新增行时，默认以POST方法调用和src同路径的端点，请求体为新增行的完整JSON数据
• 更新操作：用户提交行内容修改时，默认以PUT方法调用{src}/{行主键值}格式的路径，请求体为修改后的行数据
• 删除操作：用户触发行删除时，默认以DELETE方法调用{src}/{行主键值}格式的路径完成请求
  如果你的本地API的路径、请求方法和上述默认规则不一致，可以通过crud-config属性统一覆盖所有请求的配置，包括自定义端点、请求方法、请求头等参数。

自定义请求适配方案 #

针对本地API的特殊要求，可以通过以下方式调整请求逻辑，不需要修改ZingGrid的核心交互逻辑：

• 主键字段适配：如果本地API的行主键不是默认的id字段，通过main-key属性指定实际的主键字段名，避免CRUD请求时路径拼接错误
• 数据结构适配：如果本地API返回的是带包装层的结构（比如{code:0, data:{list:[], total:100}}），通过resolve-data绑定的解析函数，提取需要渲染的数组部分传给表格
• 全局鉴权配置：通过ZG.setConfig统一设置所有CRUD请求的公共请求头（比如接口鉴权token），不需要在每个CRUD配置里重复声明
• 手动请求接管：如果本地API的请求规则特殊到无法通过默认配置适配，可以完全禁用内置的自动请求能力，监听表格的交互事件（比如新增提交、编辑提交、删除触发），拿到对应行数据后自行发起本地API调用，请求完成后再调用组件的公开方法更新表格数据

最小可运行参考实现 #

<zing-grid
  id="userTable"
  src="http://localhost:3000/api/users"
  editor
  page
  main-key="user_id"
  crud-config='{
    "create": {
      "method": "POST",
      "endpoint": "http://localhost:3000/api/users"
    },
    "update": {
      "method": "PATCH",
      "endpoint": "http://localhost:3000/api/users"
    },
    "delete": {
      "method": "DELETE",
      "endpoint": "http://localhost:3000/api/users"
    }
  }'
></zing-grid>

<script>
  // 配置全局公共请求头
  ZG.setConfig("headers", {
    "Authorization": `Bearer ${localStorage.getItem("login_token")}`
  })

  // 解析本地API的返回结构
  const table = document.querySelector("#userTable")
  table.resolveData = (resp) => resp.data.list
</script>

注意：上述实现省略了ZingGrid的资源引入步骤，实际项目中需要先引入对应版本的组件资源，再初始化表格配置。

内容的提问来源于stack exchange，提问作者khawar