表单组件通过addWidgets方法传入组件配置数组批量创建。
~~~
return TBuilder('form',$this)->addTabGroup('基本信息')
->addWidgets([
//=======================常规form组件========================
//配置格式: array('','',[[],'']);
['title|text','标题|用于后台显示的配置标题'],
['sort|number','排序|用于分组显示的顺序', ['tip'=>'测试:用于分组显示的顺序'] ],
['icon_class|text','图标类名', ['icon'=>'fa fa-angle-right'] ],
['url|text','链接|U函数解析的URL或者外链'],
['pid|select','上级菜单|所属的上级菜单',[M('Menu')->getTreeMenus(), 'id|title_show']],
['group|text','分组|用于左侧分组二级菜单'],
['cover_id|images', '封面图片'],
['cover_ids|cropper', '封面图片2', ['pic_num'=>2,'pic_wh'=>'100*200'] ],
['tip|text','说明|菜单详细说明'],
['birthday|date', '天'],
['birthday1|datetime', '时'],
['birthday2|dateyear', '年'],
['birthday3|datemonth', '月'],
['tags|tags', '标签',],
['id|hidden'],
['type2|checkbox','多选|多选测试',[config('CONFIG_TYPE_LIST')]],
['type3|radio','单选|单选测试',[config('yes_no')]],
['is_open|switch','配置类型|系统会根据不同类型解析配置值'],
['content|kindeditor', '内容'],
//=======================扩展form组件========================
// 配置格式: array('widget_type'=>'','attr'=>'val')
['widget_type'=>'html','content'=>'
自定义显示内容
'],['widget_type'=>'title_line','icon_class'=>'iconfont icon-jiexi3','title'=>'分组名称']
])
->addTabGroup('访问授权')->addWidgets([
['menu_auth|tree_checkbox', '访问授权',[$mune_list,'id|title'] ],
])
->fetch();
~~~
每个组件可由四项配置参数,分别对应如下:
> /*
* 配置值数组:
* 参数1:字段名|字段类型|附加样式及属性
* 字段名
*
* 字段类型
* val
* input
* text
* number
* password
* color
* radio
* images
* cropper
* checkbox
* hidden
* select
* switch
* tree_checkbox
* kindeditor
*
* 附加样式及属性
* .class1,.class2,#id1,attr:attr_val,attr2:attr_val2
*
* 例:name|text|.class1,.class2,#id1,attr:attr_val,attr2:attr_val2
*
*
*
* 参数2:字段名称|字段描述
* 参数3:可选数据数组
* 索引数组传值:
* 参数1:列表数据数组
* 参数2:列表数组中使用的键值名称
* 关联数组传值:
* 【函数处理区】input
* func对字段处理的函数名称,参数为当前值
* func_param当存在对字段处理的函数时,此值为为该函数的第二个参数
* config_name配置参数名。当func为c_name时且func_param未传值,此值可替代func_param。
* 当type为field且可编辑时,此为编辑选择数据源。
*
* 【当组件为选项时,对应索引数组传值的参数1和参数2】select
* listdata列表数据数组
* key_relevance列表数组中使用的键值名称
* 【更多复杂(扩展)配置】input
* icon组件展示存在图标的
* tip组件的tip提示内容
*
* 【图片/文件上传】
* limit_num 可上传图片数量(默认1个)
*enabled_edit图片是否可编辑(删除或替换)
*ext 指定文件格式,不传不限制
* 【图片裁切】
* pic_wh指定图片宽高
* pic_ratio指定图片宽高比
*
* 参数4:值
*/
参数1可由三项组成,第三项可传入多个以.开头的为类类型值,以#开头的为id属性值,其余的为自定义属性的键值
### 字段属性
~~~
->addWidgets([
['report_download|number','报告下载包|考生考试pdf报告下载',[],10],
['short_message_number|number|disabled:true','短信包',[],0],
])
~~~
![](https://box.kancloud.cn/a141dddb3cc414a5b3eb34a772cd0230_916x108.png)
### 二级数组支持
~~~
->addWidgets([
['expand_config[free_invite_read_num]|number', '邀请访问免费'],
])
~~~
### 富文本组件
kindeditor
~~~
->addWidgets([
['description|kindeditor', '详情'],
])
~~~
![](https://box.kancloud.cn/d3f621c287db80f678480023cec70e97_1068x440.png)
editormd
~~~
->addWidgets([
['description|editormd', '详情'],
])
~~~
![](https://box.kancloud.cn/ba4c0a1166bb6fcec3da696bb918a1c6_1076x442.png)
展开显示
~~~
->addTabGroup('文章详情')
->addWidgets([
['description|editormd', '详情',['full_show'=>true]],
])
~~~
![](https://box.kancloud.cn/044a1d97add3d6b31e995fa42ee75512_1154x489.png)