跳转到内容

前端控件

输入控件和展示控件

控件分为输入控件和展示控件,与模型中的 field  对应,每种类型的 field 对应一种或多种控件输入/展示控件。Field 详细参数

自动判断控件类型

因为 field 控件只能在 数据容器 中使用。所以在编写 xml 时不需要区别控件是输入控件还是展示控件,数据容器会做判断。例如:在 Form 数据容器中使用输入控件,而在 Table 中则使用展示控件。

例如:User 模型中有一个 age 的字段,类型为 Number,使用者只需在 xml 中写 <Field name="age" /> ,就能对应到 engine 中 <InputNumber>  控件。 test


默认控件用法

<Form model="user2_User" key="test">
<Fields>
<Field name="password" />
<!-- name指向模型上定义的field -->
<Field name="address.city" />
<Field name="sex" />
<Field name="name" />
<Field name="locked" />
</Fields>
</Form>

默认控件用法 renderType 不指定,默认取当前类型下的第一个控件。 使用者在大多数情况下不需要关心使用何种控件,engine 会根据模型上定义的 fieldTpye 类型选择相应的控件。 默认控件一览表


自定义控件用法

<!-- 单纯的指定rendeType -->
<Field name="sex" renderType="Radio" />
<!-- 指定rendeType,并且给控件传参数 -->
<Field name="classifies">
<RenderType>
<CascadeModelSelect parentField="parent" leafOnly />
</RenderType>
</Field>

自定义控件用法 并不是无限制的,它的可选择范围是根据 字段类型 来定的。Boolean 、Enum、EnumMulti、ToMany、ToOne 这几种类型的字段,对应 engine 中的多个控件。 数据类型对应可选择控件可以参考以下控件类型一览表


控件类型一览表

字段类型 对应控件
编辑态 展示态 搜索栏中
Text Iput Text Input
TextArea TextArea
RichTex Action RichText
NonRelatedModelSelect NonRelatedModelSelect
Date/DateTime DatePicker Date RangePicker
DatePicker
MonthPicker RangeMonthPicker
MonthPicker
Time TimePicker Time RangeTimePicker
TimePicker
Number/Int/Float InputNumber Number InputNumber
Progress Progress RangeNumber
Rate Rate Rate
YearPicker Number YearRangePicker
YearPicker
NonRelatedModelSelect NonRelatedModelSelect
Enum SingleChoice Enum Select
Select/Transfer/MultiChoice
EnumMulti EnumMulti
ToOne/ToMany CascadeModelSelect ModelSelect CascadeModelSelect
ModelSelect MainField ModelSelect
TreeSelect
Text
Json Textarea Text
NonRelatedModelSelect ModelInfo
CascadeModelSelect
Boolean SingleChoice Boolean Select
Checkbox
Select
Switch Switch
Address Input Address Input
Textarea Textarea
Attachment Attachment Attachment
Image Image Image
Password Password Password Password
Email Email Email Email
Phone Phone Phone Phone
Link Link Link
MultiText Textarea Input Input
RichText RichText RichText Input
Textarea Text
Input
Rate Rate Rate