ZeroCloud 低代码开发平台
首页
用户手册
开发者手册
首页
用户手册
开发者手册
  • 用户手册

    • 产品简介
    • 快速入门
    • 工作台
    • 组织管理
    • 数据管理
    • 业务建模

      • 表单管理

        • 表单设计
        • 组件配置

          • 组件属性
          • 组件校验
          • 组件事件
          • 组件样式
        • 基础组件

          • 标题
          • 文字
          • 图片
          • 按钮
          • 链接
          • 分割线
          • 网页
        • 布局组件

          • 表单区块
          • 网格布局
          • 标签页
          • 明细表格
          • 明细区域
        • 功能组件

          • 输入文本
          • 日期时间
          • 单项选择
          • 多项选择
          • 下拉选择
          • 计数器
          • 开关
          • 滑块
          • 评分
          • 上传附件
          • 选择用户
          • 选择部门
          • 选择数据
          • 选择颜色
          • 富文本
          • UEditor
          • 条形码
          • 二维码
          • 添加明细行
          • 流程审批
          • 历史流程
      • 表单模型

        • 模型设计
        • 用法示例
      • 视图管理

        • 视图设计
        • 基础组件

          • 文字
          • 按钮
          • 图片
          • 链接
          • 分割线
          • 标签
          • 网页
          • Html
        • 布局组件

          • 页头
          • 容器
          • 网格
          • 区块
          • 卡片
          • 标签页
        • 模态组件

          • 对话框
          • 抽屉
        • 数据展示

          • 表格
          • 数据表格
          • 树
          • 数据树
          • 轮播图
          • 日历
          • 图表
          • 时间线
          • 步骤条
          • 宫格
          • 进度条
          • 分页
          • 标记
        • 数据输入

          • 表单/表单项
          • 文本框
          • 开关
          • 日期选择
          • 单项选择
          • 多项选择
          • 下拉选择
          • 滑块
          • 评分
      • 报表管理
    • 流程设计

      • 流程定义

        • 流程设计
        • 节点配置
        • 办理人配置
      • 决策定义
      • 我的任务
      • 流程运维
      • 流程监控
    • 应用管理
    • 安全管理

      • 用户组
      • 安全角色
      • 权限资源
      • 权限分配
    • 系统监控

      • 系统监控
  • 开发者手册

    • 安装部署

      • 环境要求
      • 生产环境
    • 技术架构

      • 技术栈
    • API 文档

      • 概述
      • PC端 JS-API

        • 全局变量
        • PC表单
        • PC视图
      • 移动端 JS-API

        • 全局变量
        • 移动表单
        • 移动视图
      • 服务端 API

    • 常用案例

      • PC表单

        • 表单组件

          • 明细表格
        • 表单校验
        • 生命周期
        • 组件事件
        • 扩展方法
      • PC视图

        • 视图组件

          • 数据表格
          • 上传组件
        • 组件事件
        • 扩展方法
        • 生命周期
        • 视图样式
        • 系统案例

          • 消息提醒
          • 操作确认
          • 全屏加载
          • 批量删除
          • 高级搜索
          • 远程搜索
          • 组件间传值
          • 数据表格默认全选
          • 时间范围
          • 附件下载\预览
          • 模态层动态展示图片
          • 表格重复行合并行
          • 评分禁用
          • 右键树菜单
          • 视图中打开视图
      • 自定义服务

        • 系统表单
        • 系统视图
        • 流程服务
        • 附件文件
        • 开始
        • 环境搭建
        • Swagger 文档
        • 前台通用请求方式
        • 自定义返回值
        • 按钮点击给明细表赋值
        • 表单展示接口报错
        • 数据选择使用ajax
        • 数据源使用后台接口
        • 根据临时变量的值给后台传参
        • 批量删除
        • 删除按钮
        • 入库判断库存
        • 表单调用后台自定义接口
        • 后台发起流程
        • 出库校验
  • 常见问题

    • 问题反馈

系统视图

分页数据源

数据表格/数据列表/选择数据 API数据源

数据结构

数据表格需要一个分页的数据结构,外层需要通过ZcResult包装,返回给数据表格。

data中需要包含 index、size、total、rows,其中:

  • rows为数据列表
  • index为当前页码
  • size为每页数据量
  • total为数据总量
{
    "success": true,
    "code": "00000",
    "message": null,
    "data": {
        "index": 1,
        "size": 20,
        "total": "100",
        "rows": [
            {
                "字段名称": "字段值",
                "字段名称2": "字段值2"
            }
        ]
    }
}

后台代码

@PostMapping("data_table_pager")
public ZcPageResult<Product> dataTablePager(@RequestParam(defaultValue = "1") String index, @RequestParam String size) {
    try {
        // 将字符串参数转换为长整型
        long indexLong = Long.parseLong(index);
        long sizeLong = Long.parseLong(size);

        // 验证分页参数是否有效
        if (indexLong <= 0 || sizeLong <= 0) {
            throw new IllegalArgumentException("分页参数无效");
        }
        ZcPageResult<Product> zcPageResult = new ZcPageResult<>();
        // 分页对象
        Page<Product> page = new Page<>(indexLong, sizeLong);
        // 分页的条件
        QueryWrapper<Product> queryWrapper = new QueryWrapper<>();
        // 设置一个查询条件,相对于where语句,proName字段不能为ACX(这个地方的column应该和数据库字段名称一致)
        queryWrapper.ne("pro_name", "ACX");
        // 执行查询
        IPage<Product> pageResult = productDao.selectPage(page, queryWrapper);
        // 设置分页结果
        zcPageResult.setRows(pageResult.getRecords());
        zcPageResult.setTotal(pageResult.getTotal());
        zcPageResult.setIndex((int) pageResult.getCurrent());
        zcPageResult.setSize((int) pageResult.getSize());
        return zcPageResult;
    } catch (NumberFormatException e) {
        // 处理参数转换异常
        throw new IllegalArgumentException("参数转换错误,无法识别的分页参数", e);
    } catch (IllegalArgumentException e) {
        throw e;
    }
}

数据树

数据树的请求并非一次将数据全部取回,而是根据点击的项标识获取下一级数据。因此会触发多次请求,数据格式亦为ZcPageResult对象(分页格式),但会以size 999的方式请求,以一次性获取目标所有的节点数据。

数据结构中需要包含当前节点的key以及父节点的key,其中,标识字段填写当前节点的key,父级字段填写父级节点的key,标题字段填写当前节点的标题。

顶级节点数据结构

{
    "success": true,
    "code": "00000",
    "message": null,
    "data": {
        "index": 1,
        "size": 999,
        "total": "1",
        "rows": [
            {
                "key": "0",
                "name":"一级节点",
                "parent_key": "",
            }
        ]
    }
}

子节点数据结构

{
    "success": true,
    "code": "00000",
    "message": null,
    "data": {
        "index": 1,
        "size": 999,
        "total": "1",
        "rows": [
            {
                "key": "0-0",
                "name":"二级节点 1",
                "parent_key": "0",
            },
            {
                "key": "0-1",
                "name":"二级节点 2",
                "parent_key": "0",
            }
        ]
    }
}
Prev
系统表单
Next
流程服务