动态创建表单

页面中的组件

• 可以在设计时，添加到 w 文件中，通过页面编译，生成 JS 文件，在浏览器里面运行
• 也可以在 JS 文件中，写 JSX 代码动态渲染

系统组件和原生组件的区别

• 系统组件增加了绑定数据组件的能力
• 原生组件的属性大多都可使用

何时使用

通常情况下，不需要使用 JS 动态渲染页面，因为组件都带有“动态隐藏”属性，可以动态控制组件是否显示。例如：按钮，表单项、表格列。

一般说来，仅当数据列不确定，需要动态创建数据组件，展现动态数据组件的表单、表格时，才需要使用 JS 动态渲染页面。

动态表格

在 w 文件中，调用 JS 方法渲染一个表格，代码如下

<antdpro:Div id="div2">{$page.tableRender()}</antdpro:Div>

在 JS 文件中定义 tableRender 方法，代码如下

    tableRender = () => {
        const items = [{ "id": "fid", "title": "主键" }, { "id": "name", "title": "名称" }, { "id": "price", "title": "单价" }];
        return (<Table id="table0" pagination={false} listProvider="true" refDataId="productData" item="item" index="index" items={productData.value}>
            {items.map((item, index) => (
                <Table.Column dataIndex={item.id} title={item.title}></Table.Column>
            ))}
        </Table>)
    }

其中使用 table 组件，需要引用，代码如下

import Table from "$UI2/comp/antdpro/components/Table/Table.react";

特别说明

• 引用系统的 Table 组件，而不是引用 antd 的 table 组件，是因为系统的 Table 组件支持绑定数据组件
• Table 组件有两个属性 refDataId 和 items 用于绑定数据组件
• 如果不绑定数据组件，可以渲染 antd 的 table 组件
• 绑定的数据组件即可以是 w 文件里面有的，也可以是通过 JS 动态创建的。动态创建数据组件参考《动态创建数据组件》

运行效果，如下图所示

动态表单

在 w 文件中，调用 JS 方法渲染一个表单，代码如下

<antdpro:Div id="div0">{$page.formRender()}</antdpro:Div>

在 JS 文件中定义 tableRender 方法，代码如下

    formRender = () => {
        return (<Form id="form0" labelCol={{span:6}}>
            <Row gutter={20} id="row0">
                <Col id="col0" span={12}>
                    <Form.Item id="formItem0" label={productData.label('name')?.toString()} refDataId="productData" refColumnName="name" refRow={productData?.current}>
                        <Input id="input0" refDataId="productData" refColumnName="name" refRow={productData?.current}></Input>
                    </Form.Item>
                </Col>
                <Col id="col1" span={12}>
                    <Form.Item id="formItem1" label={productData.label('firstClass')?.toString()} refDataId="productData" refColumnName="firstClass" refRow={productData?.current}>
                        <Select id="select0" optionsLabel="name" optionsValue="id" refDataId="productData" refColumnName="firstClass" refRow={productData?.current}
                            labelRefDataId="productData" labelRefColumnName="unit" labelRefRow={productData?.current} optionsRefDataId="dictData" options={dictData.value}></Select>
                    </Form.Item>
                </Col>
                <Col id="col2" span={12}>
                    <Form.Item id="formItem2" label={productData.label('secondClass')?.toString()} refDataId="productData" refColumnName="secondClass" refRow={productData?.current}>
                        <Radio.Group id="radioGroup0" optionsLabel="name" optionsValue="id" refDataId="productData" refColumnName="secondClass" refRow={productData?.current} optionsRefDataId="dictData" options={dictData.value}></Radio.Group>
                    </Form.Item>
                </Col>
                <Col id="col3" span={12}>
                    <Form.Item id="formItem3" label={productData.label('thirdClass')?.toString()} refDataId="productData" refColumnName="thirdClass" refRow={productData?.current}>
                        <Checkbox.Group id="checkboxGroup0" optionsLabel="name" optionsValue="id" refDataId="productData" refColumnName="thirdClass" refRow={productData?.current} optionsRefDataId="dictData" options={dictData.value}></Checkbox.Group>
                    </Form.Item>
                </Col>
                <Col id="col4" span={12}>
                    <Form.Item id="formItem4" label={productData.label('images')?.toString()} refDataId="productData" refColumnName="images" refRow={productData?.current}>
                        <Upload id="upload0" refDataId="productData" refColumnName="images" refRow={productData?.current}></Upload>
                    </Form.Item>
                </Col>
                <Col id="col5" span={12}>
                    <Form.Item id="formItem5" label={productData.label('isExpensive')?.toString()} refDataId="productData" refColumnName="isExpensive" refRow={productData?.current}>
                        <Switch id="switch0" refDataId="productData" refColumnName="isExpensive" refRow={productData?.current}></Switch>
                    </Form.Item>
                </Col>
                <Col id="col6" span={12}>
                    <Form.Item id="formItem6" label={productData.label('description')?.toString()} refDataId="productData" refColumnName="description" refRow={productData?.current}>
                        <Input.TextArea id="inputTextArea0" refDataId="productData" refColumnName="description" refRow={productData?.current}></Input.TextArea>
                    </Form.Item>
                </Col>
            </Row>
        </Form>)
    }

其中使用 Form、、Form.Item、Row、Col、Input、Select、Radio、Checkbox、Upload、Switch 等组件，需要引用，代码如下

import { Row, Col } from 'antd';
import componentRenderWrapper from "../../../core/render/ComponentRenderWrapper"; 
import antdpro_Form from "$UI2/comp/antdpro/components/Form/Form.react";
const Form =  componentRenderWrapper(antdpro_Form);
import '$UI2/comp/antdpro/components/Form.Item/Form.Item.react';
Form.Item =  componentRenderWrapper(antdpro_Form.Item);
import antdpro_Input from "$UI2/comp/antdpro/components/Input/Input.react";
const Input =  componentRenderWrapper(antdpro_Input);
import antdpro_Select from "$UI2/comp/antdpro/components/Select/Select.react";
const Select =  componentRenderWrapper(antdpro_Select);

import antdpro_Radio from "$UI2/comp/antdpro/components/Radio/Radio.react";
const Radio =  componentRenderWrapper(antdpro_Radio);
import antdpro_Checkbox from "$UI2/comp/antdpro/components/Checkbox/Checkbox.react";
const Checkbox =  componentRenderWrapper(antdpro_Checkbox);
import antdpro_Radio_Group from "$UI2/comp/antdpro/components/Radio.Group/Radio.Group.react";
Radio.Group =  componentRenderWrapper(antdpro_Radio_Group);
import antdpro_Checkbox_Group from "$UI2/comp/antdpro/components/Checkbox.Group/Checkbox.Group.react";
Checkbox.Group =  componentRenderWrapper(antdpro_Checkbox_Group);

import antdpro_Upload from "$UI2/comp/antdpro/components/Upload/Upload.react";
const Upload =  componentRenderWrapper(antdpro_Upload);
import antdpro_Switch from "$UI2/comp/antdpro/components/Switch/Switch.react";
const Switch =  componentRenderWrapper(antdpro_Switch);
import antdpro_TextArea from "$UI2/comp/antdpro/components/Input.TextArea/Input.TextArea.react";
Input.TextArea =  componentRenderWrapper(antdpro_TextArea);
import antdpro_OrgSelect from "$UI2/comp/antdpro/components/OrgSelect/OrgSelect.react";
const OrgSelect =  componentRenderWrapper(antdpro_OrgSelect);

特别说明

• 引用系统的组件，而不是引用 antd 的组件，是因为系统的组件支持绑定数据组件
• 系统表单组件中有一些以 ref、label、options 开头的属性用于绑定数据组件
• 绑定的数据组件即可以是 w 文件里面有的，也可以是通过 JS 动态创建的。动态创建数据组件参考《动态创建数据组件》

运行效果，如下图所示

下面分别说明各组件，需要引用的文件和渲染的 JSX 代码

表单

import antdpro_Form from "$UI2/comp/antdpro/components/Form/Form.react";
const Form =  componentRenderWrapper(antdpro_Form);
import '$UI2/comp/antdpro/components/Form.Item/Form.Item.react';
Form.Item =  componentRenderWrapper(antdpro_Form.Item);

<Form id="form0" labelCol={{span:6}}>
    <Form.Item id="formItem0" label={productData.label('name')?.toString()} refDataId="productData" refColumnName="name" refRow={productData?.current}>
    </Form.Item>
</Form>)

行列

import { Row, Col } from 'antd';

<Row gutter={20} id="row0">
    <Col id="col0" span={12}>
    </Col>
</Row>

输入框

import antdpro_Input from "$UI2/comp/antdpro/components/Input/Input.react";
const Input =  componentRenderWrapper(antdpro_Input);

<Input id="input0" refDataId="productData" refColumnName="name" refRow={productData?.current}></Input>

选择器

import antdpro_Select from "$UI2/comp/antdpro/components/Select/Select.react";
const Select =  componentRenderWrapper(antdpro_Select);

<Select id="select0" optionsLabel="name" optionsValue="id" refDataId="productData" refColumnName="firstClass" refRow={productData?.current}
    labelRefDataId="productData" labelRefColumnName="unit" labelRefRow={productData?.current} optionsRefDataId="dictData" options={dictData.value}></Select>

单选组

import antdpro_Radio from "$UI2/comp/antdpro/components/Radio/Radio.react";
const Radio =  componentRenderWrapper(antdpro_Radio);
import antdpro_Radio_Group from "$UI2/comp/antdpro/components/Radio.Group/Radio.Group.react";
Radio.Group =  componentRenderWrapper(antdpro_Radio_Group);

<Radio.Group id="radioGroup0" optionsLabel="name" optionsValue="id" refDataId="productData" refColumnName="secondClass" refRow={productData?.current} optionsRefDataId="dictData" options={dictData.value}></Radio.Group>

多选组

import antdpro_Checkbox from "$UI2/comp/antdpro/components/Checkbox/Checkbox.react";
const Checkbox =  componentRenderWrapper(antdpro_Checkbox);
import antdpro_Checkbox_Group from "$UI2/comp/antdpro/components/Checkbox.Group/Checkbox.Group.react";
Checkbox.Group =  componentRenderWrapper(antdpro_Checkbox_Group);

<Checkbox.Group id="checkboxGroup0" optionsLabel="name" optionsValue="id" refDataId="productData" refColumnName="thirdClass" refRow={productData?.current} optionsRefDataId="dictData" options={dictData.value}></Checkbox.Group>

附件

import antdpro_Upload from "$UI2/comp/antdpro/components/Upload/Upload.react";
const Upload =  componentRenderWrapper(antdpro_Upload);

<Upload id="upload0" refDataId="productData" refColumnName="images" refRow={productData?.current}></Upload>

开关

import antdpro_Switch from "$UI2/comp/antdpro/components/Switch/Switch.react";
const Switch =  componentRenderWrapper(antdpro_Switch);

<Switch id="switch0" refDataId="productData" refColumnName="isExpensive" refRow={productData?.current}></Switch>

长文本

import antdpro_TextArea from "$UI2/comp/antdpro/components/Input.TextArea/Input.TextArea.react";
Input.TextArea =  componentRenderWrapper(antdpro_TextArea);

<Input.TextArea id="inputTextArea0" refDataId="productData" refColumnName="description" refRow={productData?.current}></Input.TextArea>

渲染其它组件

如何渲染本文没有介绍的系统组件

• 开发一个 w 页面，添加适当的组件，做成想要的样子

• 预览页面，打开“页面.components.js”文件，找到系统生成的 JSX 代码，如下图所示

• 复制到 JS 方法中，即可使用
• 其中有一些复杂的内容，可以简化处理

例如

• __expression 方法

items={/* props */__expression(({restData0}) => {return restData0.value;},{$page},['restData0'])}
简化为 items={restData0.value} 只保留 return 后面的部分

• _exRun 方法

refRow={((_exRun('restData0.current','restData0'))(restData0))}
简化为 refRow={restData0?.current} 只保留第一个参数

• 渲染方法中只使用了文本组件

title={({sortOrder, sortColumn, filters})=>(<Typography.Text id="typographyText3" text="商品id"/>)}
简化为 title={"商品id"} 只保留文本部分