跳到主要内容

自增控件

通过函数，自增控件可以动态添加、删除和修改其子项，也可以动态控制其属性，以满足复杂的数据输入需求。

控件列表​

  • 明细子表

ctx 函数列表​

获取 ArrayForm 内组件的值​

由于 ArrayForm 组件由多行组成，所以在获取 ArrayForm 内指定组件的值时，需要明确指定获取第几行的值

使用方法​

ctx.getArrayValue(tableName); // 获取到ArrayForm的所有值

ctx.getArrayValue(tableName, rowIndex); // 获取到ArrayForm指定行的值

ctx.getArrayValue(tableName, rowIndex, dataBind); // 获取到ArrayForm指定行，指定组件的值

ctx.getArrayValue(tableName, rowIndex, instanceId); // 获取到ArrayForm指定行，指定组件的值

示例​

// 通过ArrayForm的dataBind
ctx.getArrayValue('flow_purchase_product'); // [{...}, {...}]
// 通过ArrayForm的instanceId
ctx.getArrayValue('subtable_5a2mancx33nnv'); // [{...}, {...}]

// 获取行
// 通过ArrayForm的dataBind
ctx.getArrayValue('flow_purchase_product', 0); // {...}
// 通过ArrayForm的instanceId
ctx.getArrayValue('subtable_5a2mancx33nnv', 0); // {...}

// 获取指定行，指定组件
// 通过ArrayForm的dataBind
ctx.getArrayValue('flow_purchase_product', 0， 'flow_purchase_product.name'); // 'name'
// 通过ArrayForm的instanceId
ctx.getArrayValue('subtable_5a2mancx33nnv', 0, 'input_072edhc6yqyu0'); // 'name'

修改 ArrayForm 内组件的值​

需要注意的是，setArrayFormValue 只能修改已经存在的行的值，对于不存在的行，你应该使用 ArrayFormApi 去新增行

使用方法​

ctx.setArrayValue(tableName, rowIndex, instanceId, newValue);

ctx.setArrayValue(tableName, rowIndex, dataBind, newValue);

示例​

// 通过dataBind
ctx.setArrayValue(
  "flow_purchase_product",
  0,
  "flow_purchase_product.name",
  "新值"
);

// 通过instanceId
ctx.setArrayValue("subtable_5a2mancx33nnv", 0, "input_072edhc6yqyu0", "新值");

删除 ArrayForm 的行​

使用方法​

ctx.deleteArrayRow(tableName, rowIndex);

示例​

// 通过dataBind
ctx.deleteArrayRow("flow_purchase_product", 0);

// 通过instanceId
ctx.deleteArrayRow("subtable_5a2mancx33nnv", 0);

获取操作 ArrayForm API 的方法​

使用方法​

ctx.getArrayFormApi(tableName);

示例​

const arrayFormApi = ctx.getArrayFormApi("flow_purchase_product");

const arrayFormApi2 = ctx.getArrayFormApi("subtable_5a2mancx33nnv");

获取 ArrayForm 内组件 Instance​

使用方法​

ctx.getArrayInstance(tableName, rowIndex, dataBind); // 组件实例

ctx.getArrayInstance(tableName, rowIndex, instanceId); // 组件实例

示例​

// 通过dataBind
const instance = ctx.getArrayInstance(
  "flow_purchase_product",
  0,
  "flow_purchase_product.name"
); // 组件实例

// 通过instanceId
const instance2 = ctx.getArrayInstance(
  "subtable_5a2mancx33nnv",
  0,
  "input_072edhc6yqyu0"
); // 组件实例

修改 ArrayForm 内组件的属性​

使用方法​

ctx.setArrayInstance(tableName, rowIndex, dataBind, propName, newValue);

ctx.setArrayInstance(tableName, rowIndex, instanceId, propName, newValue);

示例​

// 通过dataBind修改
// 修改组件的提示文案
ctx.setArrayInstance(
  "flow_purchase_product",
  0,
  "flow_purchase_product.name",
  "placeholder",
  "新的提示文字"
);

// 修改组件的显示隐藏，false为隐藏组件，true为显示组件
ctx.setArrayInstance(
  "flow_purchase_product",
  0,
  "flow_purchase_product.name",
  "visible",
  false
);

// 通过instanceId修改
// 修改组件的是否禁用，false为不禁用，true为禁用
ctx.setArrayInstance(
  "subtable_5a2mancx33nnv",
  0,
  "input_072edhc6yqyu0",
  "disabled",
  true
);

// 仍然可以通过instance对象实例修改，但是需要使用getArrayInstance和setInstance来进行
// 修改组件的是否必填，false为不必填，true为必填
const instance = ctx.getArrayInstance(
  "flow_purchase_product",
  0,
  "flow_purchase_product.name"
);
ctx.setInstance(instance, "required", true);

校验 ArrayForm 内组件的值​

使用方法​

ctx.validateArray(tableName); // 校验ArrayForm

ctx.validateArray(tableName, rowIndex, dataBind); // 校验ArrayForm内指定组件

ctx.validateArray(tableName, rowIndex, instanceId); // 校验ArrayForm内指定组件

示例​

const [isValid, errors] = await contextApi.validateArray(
  "flow_purchase_product"
);
if (isValid) {
  // 校验通过
} else {
  // 校验失败，存在错误项
  console.log(errors);
}

const [isValid2, errors2] = await contextApi.validateArray(
  "flow_purchase_product",
  0,
  "flow_purchase_product.name"
);
if (isValid2) {
  // 校验通过
} else {
  // 校验失败，存在错误项
  console.log(errors2);
}

const [isValid3, errors3] = await contextApi.validateArray(
  "subtable_5a2mancx33nnv",
  0,
  "input_072edhc6yqyu0"
);
if (isValid3) {
  // 校验通过
} else {
  // 校验失败，存在错误项
  console.log(errors3);
}

errors 示例​

[
  {
    index: 0,
    message: "输入框必填",
    name: "flow_purchase_product.0.flow_purchase_product.name",
    success: false,
  },
];

修改 ArrayForm 内组件是否禁用​

使用方法​

// 禁用一行
ctx.disabledArrayRow(tableName, rowIndex, disabled);

// 禁用行的指定组件
ctx.disabledArrayRow(tableName, rowIndex, dataBind, ..., disabled);

ctx.disabledArrayRow(tableName, rowIndex, instanceId, ..., disabled);

示例​

// 禁用第一行
ctx.disabledArrayRow("flow_purchase_product", 0, true);
// 不禁用第一行
ctx.disabledArrayRow("flow_purchase_product", 0, false);

// 禁用第一行的指定组件
ctx.disabledArrayRow(
  "flow_purchase_product",
  0,
  "flow_purchase_product.name",
  true
);

// 取消禁用第一行的指定组件
ctx.disabledArrayRow(
  "flow_purchase_product",
  0,
  "flow_purchase_product.name",
  false
);

修改 ArrayForm 内组件是否只读​

使用方法​

// 只读一行
ctx.readonlyArrayRow(tableName, rowIndex, readonly);

// 只读行的指定组件
ctx.readonlyArrayRow(tableName, rowIndex, dataBind, ..., readonly);

ctx.readonlyArrayRow(tableName, rowIndex, instanceId, ..., readonly);

示例​

// 只读第一行
ctx.readonlyArrayRow("flow_purchase_product", 0, true);
// 不只读第一行
ctx.readonlyArrayRow("flow_purchase_product", 0, false);

// 只读第一行的指定组件
ctx.readonlyArrayRow(
  "flow_purchase_product",
  0,
  "flow_purchase_product.name",
  true
);

// 取消只读第一行的指定组件
ctx.readonlyArrayRow(
  "flow_purchase_product",
  0,
  "flow_purchase_product.name",
  false
);

修改 ArrayForm 内组件的 options​

使用方法​

ctx.updateArrayRowOptions(tableName, rowIndex, {
  [dataBind]: newOptions,
  [instanceId]: newOptions,
});

示例​

ctx.updateArrayRowOptions("flow_purchase_product", 0, {
  select_puuadt5fixofy: [
    {
      label: "new1",
      value: "new1",
    },
    {
      label: "new2",
      value: "new2",
    },
  ],
});

params 函数列表​

删除当前行​

注意：只有当前组件是在 ArrayForm 内的组件时，params 才会提供 deleteCurrentRow 方法 注意：删除当前行后，请不要再对当前行进行任何操作

使用方法​

params.deleteCurrentRow();

示例​

if (xxx) {
  params.deleteCurrentRow();
  return;
}

设置当前行的组件禁用​

注意：只有当前组件是在 ArrayForm 内的组件时，params 才会提供 setCurrentRowDisableds 方法

使用方法​

// 禁用当前行
params.setCurrentRowDisableds(true)
// 取消禁用当前行
params.setCurrentRowDisableds(false)

// 禁用当前行的指定组件
params.setCurrentRowDisableds(dataBind, dataBind2, ..., true)
// 取消禁用当前行的指定组件
params.setCurrentRowDisableds(dataBind, dataBind2, ..., false)

示例​

// 禁用当前行
params.setCurrentRowDisableds(true);
// 取消禁用当前行
params.setCurrentRowDisableds(false);

// 禁用当前行的指定组件
params.setCurrentRowDisableds(
  "flow_purchase_product.name",
  "flow_purchase_product.ID",
  true
);
// 取消禁用当前行的指定组件
params.setCurrentRowDisableds(
  "flow_purchase_product.name",
  "flow_purchase_product.ID",
  false
);

设置当前行的 options 选项​

注意：只有当前组件是在 ArrayForm 内的组件时，params 才会提供 setCurrentRowOptions 方法

使用方法​

params.setCurrentRowOptions({
  [dataBind]: newOptions,
  [instanceId]: newOptions,
});

示例​

params.setCurrentRowOptions({
  select_puuadt5fixofy: [
    {
      label: "new1",
      value: "new1",
    },
    {
      label: "new2",
      value: "new2",
    },
  ],
});

修改当前行的值​

注意：只有当前组件是在 ArrayForm 内的组件时，params 才会提供 updateCurrentRowValues 方法

使用方法​

params.updateCurrentRowValues({
  [dataBind]: newValue,
  [instanceId]: newValue,
});

示例​

params.updateCurrentRowValues({
  "flow_purchase_product.name": "2",
  "flow_purchase_product.num": 1,
});

自增组件底层 Api(ArrayFormApi)​

注意事项​

下文中的 arrayFormApi，代表的是：通过ctx.getArrayFromApi(tableName)拿到的 ArrayFormApi，或者是通过params.arrayFormApi拿到的 ArrayFormApi。

从结尾新增行​

使用方法​

arrayFormApi.append(row);

arrayFormApi.append([row1, row2, row3]);

示例​

// 新增一行，该空行的值为默认值
arrayFormApi.append({});

// 新增一行，该行的值为指定值
arrayFormApi.append({
  "flow_purchase_product.name": "2",
  "flow_purchase_product.num": 1,
});

// 新增三行，这三个空行的值均为默认值
arrayFormApi.append([{}, {}, {}]);

删除行​

使用方法

arrayFormApi.remove(index);

arrayFormApi.remove([index, index2]);

示例​

// 删除第二行
arrayFormApi.remove(1);

// 删除第二行和第四行
arrayFormApi.remove([1, 3]);

从开头新增行​

使用方法​

arrayFormApi.prepend(row);

arrayFormApi.prepend([row1, row2]);

示例​

// 新增一行，该空行的值为默认值
arrayFormApi.prepend({});

// 新增一行，该行的值为指定值
arrayFormApi.prepend({
  "flow_purchase_product.name": "2",
  "flow_purchase_product.num": 1,
});

// 新增三行，这三个空行的值均为默认值
arrayFormApi.prepend([{}, {}, {}]);

从指定位置插入新行​

使用方法​

arrayFormApi.insert(index, newRow);

arrayFormApi.insert(index, [newRow, newRow2]);

示例​

// 新增一行，该空行的值为默认值
arrayFormApi.prepend({});

// 新增一行，该行的值为指定值
arrayFormApi.prepend({
  "flow_purchase_product.name": "2",
  "flow_purchase_product.num": 1,
});

// 新增三行，这三个空行的值均为默认值
arrayFormApi.prepend([{}, {}, {}]);

替换当前 ArrayForm 的值​

使用方法​

arrayFormApi.replace(newArray);

示例​

// 清空当前自增组件
arrayFormApi.replace([]);

// 将当前自增组件的值替换为 一行，且值为如下值
arrayFormApi.replace([
  {
    "flow_purchase_product.name": "2",
    "flow_purchase_product.num": 1,
  },
]);

替换指定行的数据​

使用方法​

arrayFromApi.update(index, newRow);

示例​

// 将第二行的数据替换为指定数据
arrayFormApi.update(1, {
  "flow_purchase_product.name": "2",
  "flow_purchase_product.num": 1,
});

交换行​

使用方法​

arrayFormApi.swap(indexA, indexB);

示例​

// 交换第一行和第二行
arrayFormApi.swap(0, 1);

移动行​

使用方法​

arrayFormApi.move(indexA, indexB);

示例​

// 将第三行移动到第一行的位置
arrayFormApi.move(2, 0);