大道至简，新一代企业应用无栈开发

平台之上，一种语言，可视化、脚本化、全端一体化开发

开发平台>开发参考>前端框架

开发平台

Location: 开发平台开发参考前端框架

表单输入组件

表单输入组件公共特性

所有表单字段有如下基本属性，可以在构造的时候传入:

name：字段名称
title：字段标题
description：说明文字
required：是否必选
readonly：是否只读

所有表单字段，都可响应字段变更事件:

field_obj.on('change', context, request, 'xxx.xxx:xxx')

使用ui输入组件定义表单

用表单字段生成表单ui组件，用于渲染简单的表单::

form = ui.form(title='', description='', action='')\ # 表单的标题和action
.add(ui.text_line(name="name", \
value="",
  title="",\
  placeholder='welcome',\
  required="",)\
.icon('search')\
.on('change', '@zopen.xx:xxx'))\ # 表单联动
.add(ui.hidden_input('name1','value1')\ # 隐藏变量
.add(ui.simple_select('aa', 'zhang').readonly())\ # 只读变量
.button('save', '保存')\ # 增加一个按钮
.on('submit', context, request, 'zopen.sales:test')

基础表单组件

隐藏的输入字段 hidden_input

ui.hidden_input('name', 'zhang')

单行文本 text_line

ui.text_line('name', title='文本', placeholder="blabla")
也支持html中的其他属性

提交按钮 submit_input

   ui.submit_input(name='save', title="保存", klass="primary", style="float:left")\
       .icon('search')

密码输入 password

密码输入:

ui.password('name')

选择框 basic_select

可多选，可选内容存放在Options:

ui.basic_select('name', options=[('value_a', 'display name A'), ('value_b', 'display name b')], multiple=False)

单选(Radio Box) radio_select

标准的radio box，参数类似ui.basic_select:

ui.radio_select('name', options=[('value_a', 'display name A'), ('value_b', 'display name b')], multiple=False)

复选(Check Box) check_select

类似 ui.basic_select:

ui.check_select('name', options=[('value_a', 'display name A'), ('value_b', 'display name b')], multiple=False)

文本框 text_area

文本框:

ui.text_area(name,
      rows=3,
      value="xxx",
      holdplace="xxx",
      style="bolder-color: gray", # 设置样式
      klass="Memo", # 设置特殊样式名class
      )

高级表单输入组件

增强的选择下拉 select2

类似ui.basic_select，但是交互更好，可输入选择，适合大量可选内容:

   ui.select2('name', 
               options=[('value_a', 'display name A'), 
                        ('value_b', 'display name b')], 
               multiple=False)

富文本 rich_text

富文本编辑框:

ui.rich_text(name, rows=3,)

颜色选择 color_picker

颜色选择:

ui.color_picker('color', title='颜色', value="#ffff")

代码文本 ace

代码文本编辑:

ui.ace(name, mode='python', value="code here", title="代码", width=900, height=450)

不同代码加亮语法不同，可以调整mode参数

筛选 nav_select

子导航单选组件，点击会提交表单:

ui.nav_select(name='filter_type', title='过滤', value='Content', options=[])

日期选择 date_time

时间:

ui.date_time(name, showtime=True, minutestep=30)

站点相关组件

标签选择 tag_select

标签选择:

ui.tag_select(name, context, request)

人员选择 person_select

人员选择:

ui.person_select(name, context, request, multiple=False, object_types=['person', 'group'])

或者：

person_selector = link.load_on('click',
context,
request,
'zopen.widegts:person_selector',
value=[], # 初始值
title='', # 标题
description='', # 描述信息
multiple=True, # 是否支持多选
object_types=['person', 'group']
)

选择之后触发 submit 事件::

person_selector.on('submit', context, reqeust, 'xxx.xx:xxx')

内容选择 content_select

可以选择任意类型的内容:

ui.content_select(
    name, # input 名字 
    context,
    request, 
    value=[], # 默认值
    title='', # 标题
    description='', # 描述信息
    multiple=True, # 是否支持多选
    content_types=[], # 过滤的内容类型
    metadata='', #表单代号
    upload=True, # 是否允许上传
    search_subtreee=True, # 搜索整个子树
    roots=[], # 自定根目录
 )

或者::

content_selector = button.load_on('click',
   context, # 初始位置
   request, 
   'zopen.widgets:content_selector',
   value=[], # 初始值
   title='', # 标题
   description='', # 描述信息
   multiple=True, # 是否支持多选
   content_types=[], # 过滤的内容类型
   button_title="", # 提交按钮的名字
   allow_upload=True, # 是否允许上传
   allow_paste=True, # 是否允许贴图
   search_subtreee=True, # 搜索整个子树

   metadata='', #表单代号

   roots=[], # 自定根目录

)

选择之后触发 submit 事件::

 content_selector.on('submit', context, request, 'xxx.xxxx:xxx')

该组件支持如下方法:

选择：view.select('#attachments').invoke('select')
贴图：view.select('#attachments').invoke('paste')
上传：view.select('#attachments').invoke('upload')

ui.folder_select 文件夹选择

文件夹选择:

ui.folder_select('aa', context, request,multiple=False)

ui.location_select 位置选择

位置选择:

ui.location_select('aa', context, request,)

文件上传： ui.file_upload

ui.file_upload('aa', context, request,)

表单选择： ui.dataitem_select

ui.dataitem_select('aa', context, request, multiple=False, metadata='')

表单库选择 ui.datacontainer_select

ui.datacontainer_select('aa', context, request, multiple=False, metadata='')