zin

Appearance

表单面板 formPanel ​

用法 ​

包裹表单元素的同时，还可以设置表单的标题、提交方式、提交按钮等。

php
data('title', '示例表单');

formPanel
(
    to::headingActions
    (
        icon('cog-outline'),
        btn('复制'),
    ),
    formGroup
    (
        set::name('name'),
        set::label('项目名称'),
        set::width('1/2'),
        set::strong(true),
        set::placeholder('请输入项目名称')
    ),
    formRow
    (
        formGroup
        (
            set::width('1/2'),
            set::label('所属项目集'),
            set::name('program'),
        ),
        icon('help')
    ),
    formRow
    (
        formGroup
        (
            set::width('1/2'),
            set::label('起止时间'),
            set::required(true),
            inputGroup
            (
                input
                (
                    set::name('begin'),
                    set::value(date('Y-m-d')),
                    set::placeholder('开始日期'),
                    set::required(true)
                ),
                '至',
                input
                (
                    set::name('end'),
                    set::placeholder('结束日期'),
                    set::required(true)
                ),
            )
        )
    )
);

render();
html
<div class="panel rounded-md shadow ring-0 canvas px-4 pb-4 mb-4 size-lg">
    <div class="panel-heading">
        <div class="panel-title text-lg">示例表单</div>
        <div class="panel-actions">
            <i class="icon icon-cog-outline"></i>
            <button class="btn" type="button"><span class="text">复制</span></button>
        </div>
    </div>
    <div class="panel-body">
        <form class="form form-grid" id="zin12" method="post">
            <div class="form-row">
                <div class="form-group grow-0 w-1/2">
                    <label class="form-label font-bold">项目名称</label>
                    <input class="form-control" type="text" autocomplete="off" name="name" id="name" placeholder="请输入项目名称">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group grow-0 w-1/2">
                    <label class="form-label">所属项目集</label>
                    <input class="form-control" type="text" autocomplete="off" name="program" id="program">
                </div>
                <i class="icon icon-help"></i>
            </div>
            <div class="form-row">
                <div class="form-group required grow-0 w-1/2">
                    <label class="form-label required">起止时间</label>
                    <div class="input-group">
                        <input class="form-control" type="text" autocomplete="off" name="begin" value="2023-04-18" placeholder="开始日期" required="">
                        <span class="input-group-addon">至</span>
                        <input class="form-control" type="text" autocomplete="off" name="end" placeholder="结束日期" required="">
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="toolbar form-actions form-group gap-4">
                    <button class="toolbar-item btn primary" type="submit"><span class="text">保存</span></button>
                    <a class="toolbar-item btn btn-default" type="button" href=""><span class="text">返回</span></a>
                </div>
            </div>
            <script>(function(){$(() => zui.create("ajaxForm","#zin12",[]));}())</script>
        </form>
    </div>
</div>

提示

如示例所示，formPanel 组件是一个容器组件，使用 formGroup、formRow、inputGroup 组件来实现表单元素的布局。从生成的HTML代码可以看出，该组件输出了一个 面板 panel 的层次，其中 .panel-heading 为表单的标题，.panel-body 为表单 form 的主体。

使用 formRow 组件实现了表单元素的水平布局，formGroup 组件用于包裹和设置表单元素及其样式（如：宽度，类型），而 inputGroup 组件用于组合多个输入组件以实现复杂的输入需求。

批量操作表单面板 ​

通过设置属性 batch=true 可以将表单面板转换为批量操作表单面板，批量操作表单面板可以用于批量操作表格中的数据。可以使用批量操作表单面板（formBatchPanel）中的所有属性。详细用法参考批量操作表单面板（formBatchPanel）文档。

属性 ​

名称 类型 所属部件 可选 默认值 说明
idstringpanel ✓null
titlestringpanel ✓null标题。
titleClassstringpanel ✓null标题类名。
titlePropsarraypanel ✓null标题属性。
headingClassstringpanel ✓null标题栏类名。
headingPropsarraypanel ✓null标题栏属性。
headingActionsarray[]panel ✓null标题栏操作按钮。
headingActionsClassstringpanel ✓null头部操作按钮栏类名。
bodyClassstringpanel ✓null主体类名。
bodyPropsarraypanel ✓null主体属性。
footerActionsarray[]panel ✓null底部操作按钮。
footerClassstringpanel ✓null底部类名。
footerPropsarraypanel ✓null底部属性。
containerboolpanel ✓null是否使用 Container 层。
classstringformPanel ✓"panel-form"类名。
sizestringformPanel ✓"lg"额外尺寸。
formIDstringformPanel ✓null表单 ID，如果指定为 '$AUTO'，则自动生成 form-$moduleName-$methodName。
formClassstringformPanel ✓null表单样式。
method"get""post"formPanel ✓"post"表单提交方式。
urlstringformPanel ✓null表单提交地址。
actionsarrayformPanel ✓null表单操作按钮，如果不指定则使用默认行为的 “保存” 和 “返回” 按钮。
actionsClassstringformPanel ✓"form-group no-label"表单操作按钮栏类名。
targetstringformPanel ✓"ajax"表单提交目标，如果是 'ajax' 提交则为 ajax，在禅道中除非特殊目的，都使用 ajax 进行提交。
submitBtnTextstringformPanel ✓null表单提交按钮文本，如果不指定则使用 $lang->save 的值。
cancelBtnTextstringformPanel ✓null表单取消按钮文本，如果不指定则使用 $lang->goback 的值。
itemsarrayformPanel ✓null使用一个列定义对象数组来定义表单项。
fieldsstringarrayfieldListformPanel ✓null表单字段配置。
layoutstringformPanel ✓"horz"表单布局，可选值为：'horz'、'grid' 和 normal。
labelWidthintformPanel ✓null标签宽度，单位为像素。
batchboolformPanel ✓null是否为批量操作表单。
shadowboolformPanel ✓false是否显示阴影层。
widthstringformPanel ✓null最大宽度。
modeSwitcherboolformPanel ✓null是否显示表单模式按钮。
dataarrayobjectformPanel ✓null表单项值默认数据。
labelDataarrayobjectformPanel ✓null表单项标签默认数据。
loadUrlstringformPanel ✓null动态更新 URL。
autoLoadarrayformPanel ✓null动态更新策略。
defaultModestringformPanel ✓"lite"默认表单模式（lite: 简洁版，full: 完整版）。
foldableItemsarraystringformPanel ✓null可折叠的表单项。
pinnedItemsarraystringformPanel ✓null固定显示的表单项。
customBtnarrayboolformPanel ✓null是否显示表单自定义按钮。
customFieldsarrayformPanel ✓[]@deprecated 自定义表单项。

块 ​

块名词映射类型说明
heading-在表单头部中间显示的内容
headingActionstoolbar表单头部最右侧显示动作按钮
footernav用于表单底部显示动作按钮等

数据 ​

title ​

设置表单标题，默认值为当前页面的标题。

php
data('title', '页面标题');

参考 ​

https://zentao.net

Copyright (C) 2023 cnezsoft.com