功能说明

image.png

基础设置说明如下：

  • 列表描述（表头）：可自由输入
  • 排序字段设置：点击后方“+”可添加系统字段、用户字段进行“升”“降”排序，也可以点击“-”删除该字段
  • 是否允许行点击：“允许”时可以点击表中某行数据进入详情页，“禁止”时则无法进入该行数据详情页
  • 列表模式：“普通列表”只能查看列表数据，“行编辑”可以直接在当前表单任意数据进行编辑
  • 是否显示行号：“显示”时会显示1、2、3、4行数，“不显示”则不显示行数
  • 是否显示合计：“显示”时页面最下方出现“合计”行，进行数据统计；“不显示”时页面最下方则不显示“合计”行
  • 分页方式设置：“普通分页”当前页面数据行数到达上限时，新增的行数据在第二页显示；“不分页”当前页面数据行数无上限
  • 分组字段：用于将表单按照某个字段来分组显示
  • 脚本设置：用于自定义开发设置表单功能

前台展示

列表描述

测试数据：

  • 选择一个数据源列表“销售一部业绩汇总”，进入列表设置>基础设置
  • 列表描述输入业务汇总表，可自由输入，点击保存

image.png

前台效果

image.png

排序字段设置

场景：查看销售一部年度销售总额由高到低，降序排列

image.png

保存后前台验证

image.png

是否允许行点击

场景一：数据较多时，允许行点击进入数据详情页，选择“允许”

image.png

点击保存前台验证，进入详情界面可以对数据进行编辑、删除操作

image.png

场景二：为了数据不被随意修改，选择“禁止”，则无法进入详情页进行编辑、删除操作

image.png

前台验证，无法点击行数据进入详情页

列表模式

场景一：为了数据的准确性，不能随意修改列表数据，设置“普通列表”
场景二：方便业务数据更新，设置“行编辑”

image.png

前台效果

场景二：列表数据进入编辑模式，可以进行数据修改

image.png

是否显示行号

场景一：便于统计有多少条数据，系统默认不显示行号

image.png

场景二：如需显示，可以设置“显示”行号

image.png

前台效果

image.png

是否显示合计

系统默认为不显示

场景一：显示“销售一部”第一、第二、第三、第四、年度销售总额合计
前提条件：该列字段为数字控件才能进行合计

image.png

场景二：不显示“合计”行，设置“不显示”

image.png

分页方式设置

场景一：当业务数据较多，设置“普通分页”可加快数据加载，不设置“普通分页”，加载该表格数据延长

注：列表模式为“行编辑”时，“普通分页”无效，每页数据行数上限20行，新增21行、41行、61行以此类推将进入下一页

image.png

前台效果

image.png

分组设置

场景：当学生信息过多，某一个学生存在多个信息，可以使用分组显示，查看学生信息

image.png
进入功能设计>>列表设置>>基本设置
image.png

将分组字段设置为“学生姓名”，同时可以将默认分组设置为“学生姓名”点击保存即可。

前台效果

image.png

脚本设置

脚本示例

监听列表删除按钮，当点击删除按钮时触发。

  1. dataTable.addButtonBefore('删除', function(data, resolve) {
  2.     console.log('subTable1 delete before: ', data);
  3.     var pd = '';
  4.     for (var i = 0; i < data.length; i++) {
  5.         var dataone = data[i];
  6.         if (dataone['f_cd9d392455'] === '已审批') {
  7.             pd = 'error';
  8.             break
  9.         }
  10.     }
  11.     if (pd === 'error') {
  12.         dataTable.$message.error('存在已引用数据不允许删除，请重新选择')
  13.     } else {
  14.         resolve()
  15.     }
  16. });

脚本必须压缩后放入平台。 压缩地址：http://www.bejson.com/