批量操作表单面板 `formBatchPanel`

批量操作表单面板继承自 formPanel 部件，用于渲染一个批量操作表单。

用法

定义模式

批量操作表单面板支持两种模式，通过 mode 属性来进行定义，可选值包括：

'add'：批量添加模式，为默认模式，用户可以自由删除行数据和插入新的行数据；
'edit'：批量编辑模式，必须同时提供 data 属性来定义每一行的原始数据。

定义表单项

批量操作表单通过一个类似表格的部件来展现表单控件，表格每一行对应一组表单操作，每一列对应一个表单控件。要定义每一列上的控件有两种方式，下面分别进行介绍。

提示

表单项的列宽设置参考文档批量操作项 → 列宽设置。

通过 `formBatchItem` 定义

可以通过批量操作表单项（formBatchItem）部件来定义每一列上的控件。下面为一个简单示例：

php

$modules = array();
$modules[] = array('text' => '/', 'value' => 0);
$modules[] = array('text' => '/Website', 'value' => 1);

formBatchPanel
(
    formBatchItem
    (
        set::name('id'),
        set::label('ID'),
        set::control('index'),
        set::width('50px'),
    ),
    formBatchItem
    (
        set::name('module'),
        set::label('Module'),
        set::tip('Select module'),
        set::width('200px'),
        set::ditto(true),
        set::items($modules),
        set::control('select'),
        set::hidden(true),
    ),
    formBatchItem
    (
        set::name('title'),
        set::required(true),
        set::label('Title')
    ),
    formBatchItem
    (
        set::name('desc'),
        set::label('Desc'),
        set::width('1/3'),
        set::control('editor')
    )
);

通过 `items` 属性定义

也可以通过 items 属性来定义每一列上的控件，这种方式更加灵活，可以通过数组来定义每一列上的控件，下面为一个简单示例：

php

$modules = array();
$modules[] = array('text' => '/', 'value' => 0);
$modules[] = array('text' => '/Website', 'value' => 1);

$items = array();
$items[] = array
(
    'name' => 'id',
    'label' => 'ID',
    'control' => 'index',
    'width' => '50px'
);
$items[] = array
(
    'name' => 'module',
    'label' => 'Module',
    'tip' => 'Select module',
    'width' => '200px',
    'ditto' => true,
    'items' => $modules,
    'control' => 'select',
    'hidden' => true
);
$items[] = array
(
    'name' => 'title',
    'required' => true,
    'label' => 'Title'
);
$items[] = array
(
    'name' => 'desc',
    'label' => 'Desc',
    'width' => '1/3',
    'control' => 'editor'
);

formBatchPanel
(
    set::items($items)
);

属性

名称	类型	所属部件	可选	默认值	说明
`class`	`string`	`formPanel`	✓	`"panel-form rounded-md shadow ring-0 canvas px-4 pb-4 mb-4 mx-auto"`	类名。该属性重写了父部件 `panel` 定义。
`size`	`string`	`formPanel`	✓	`"lg"`	尺寸。该属性重写了父部件 `panel` 定义。
`title`	`string`	`panel`	✓	`null`	标题。
`titleClass`	`string`	`panel`	✓	`null`	标题类名。
`titleProps`	`array`	`panel`	✓	`null`	标题属性。
`headingClass`	`string`	`panel`	✓	`null`	标题栏类名。
`headingProps`	`array`	`panel`	✓	`null`	标题栏属性。
`headingActions`	`array[]`	`panel`	✓	`null`	标题栏操作按钮。
`bodyClass`	`string`	`panel`	✓	`null`	主体类名。
`bodyProps`	`array`	`panel`	✓	`null`	主体属性。
`footerActions`	`array[]`	`panel`	✓	`null`	底部操作按钮。
`footerClass`	`string`	`panel`	✓	`null`	底部类名。
`footerProps`	`array`	`panel`	✓	`null`	底部属性。
`id`	`string`	`formPanel`	✓	`"$GID"`	ID，如果不指定则自动生成（使用 zin 部件 GID）。
`method`	`"get""post"`	`formPanel`	✓	`"post"`	表单提交方式。
`url`	`string`	`formPanel`	✓	`null`	表单提交地址。
`actions`	`array`	`formPanel`	✓	`["submit","cancel"]`	表单操作按钮，如果不指定则使用默认行为的 “保存” 和 “返回” 按钮。
`actionsClass`	`string`	`formPanel`	✓	`"form-group no-label"`	表单操作按钮栏类名。
`target`	`string`	`formPanel`	✓	`"ajax"`	表单提交目标，如果是 `'ajax'` 提交则为 ajax，在禅道中除非特殊目的，都使用 ajax 进行提交。
`submitBtnText`	`string`	`formPanel`	✓	`null`	表单提交按钮文本，如果不指定则使用 `$lang->save` 的值。
`cancelBtnText`	`string`	`formPanel`	✓	`null`	表单取消按钮文本，如果不指定则使用 `$lang->goback` 的值。
`items`	`array[]`	`formBatchPanel`	✓	`null`	使用一个列定义对象数组来定义批量表单项。该属性重写了父部件 `formPanel` 定义。
`grid`	`bool`	`formPanel`	✓	`true`	是否启用网格部件，禅道中所有表单都是网格布局，除非有特殊目的，无需设置此项。
`labelWidth`	`int`	`formPanel`	✓	`null`	标签宽度，单位为像素。
`batch`	`bool`	`formPanel`	✓	`null`	是否为批量操作表单
`minRows`	`int`	`formBatchPanel`	✓	`null`	最小显示的行数目。
`maxRows`	`int`	`formBatchPanel`	✓	`null`	最多显示的行数目。
`data`	`array[]`	`formBatchPanel`	✓	`null`	初始化行数据。
`mode`	`string`	`formBatchPanel`	✓	`null`	批量操作模式，可以为 `'add'`（批量添加）或 `'edit'`（批量编辑）。
`actionsText`	`string`	`formBatchPanel`	✓	`null`	操作列头部文本，如果不指定则使用 `$lang->actions` 的值。
`addRowIcon`	`stringfalse`	`formBatchPanel`	✓	`null`	添加行的图标，如果设置为 `false` 则不显示图标
`deleteRowIcon`	`stringfalse`	`formBatchPanel`	✓	`null`	删除行的图标，如果设置为 `false` 则不显示图标

参考

联动实现提示

批量添加表单联动参考提交，实现了项目变更时更新执行选择选项列表，具体过程大家看代码注释： https://git.zcorp.cc/easycorp/zentaopms/commit/795b4583f49717b7dd62378cbe048777cb749b16

关键提示：

通过 event.target 获取变更事件触发的项目选择框，并获取值
通过 $target.closest('tr') 获取当前变更的行
通过 $currentRow.find('.form-batch-input[data-name="branch"]') 获取当前行内分支选择框的值
通过 $.getJSON 获取执行列表，后端 ajaxGetExecutionsByProject 方法返回的是 JSON 数据，避免直接返回 HTML
更新执行选择框时需要遵从批量表单中的“同上”逻辑，所以需要同步更新所有被同上影响的行内的执行选择框
其他：
- 避免通过批量添加表格行上的 data-index 来获取相关联的表单元素，应该先找到所属行，然后通过 find 查找内部表单元素，批量添加表单中的所有表单元素都有 。form-batch-input 类，和 [data-name] 属性，可以通过这两个选择器来查找
- 无需为 <select> 添加值为空的 <option>，现在 AjaxForm 会在提交前自动处理

批量操作表单面板 formBatchPanel ​

用法 ​

定义模式 ​

定义表单项 ​

通过 formBatchItem 定义 ​

通过 items 属性定义 ​

属性 ​

参考 ​

联动实现提示 ​