完整案例
~~~
public function add( $info=array() )
{
$info = [
'name' => '名称',
'type' => 3,
'uid' => 2,
'extra' => '描述'
];
$test_data = array(
['key1'=>1,'key2'=>'张三'],
['key1'=>2,'key2'=>'李四'],
['key1'=>3,'key2'=>'王武'],
);
return TBuilder('form',$this) ->addTabGroup('基本信息')
->setFormAction( url('action') )
->addWidgets([
['name|val','配置标识|用于C/config函数调用,只能使用英文且不能重复'],
['name|text','配置标识|用于C/config函数调用,只能使用英文且不能重复',[
'validate'=>['required','minlength'=>'2']
]],
['icon|text|.input_icon_select,.class2,#id1,attr:attr_val,attr2:attr_val2','图标选择|选择图标样式'],
['icon_class|text', '图标类名', ['icon'=>'fa fa-angle-right'] ],
//['is_show_difficulty|switch','是否显示难度'],
//['project_difficulty|select','难度',['listdata'=>config('project_difficulty'),'key_relevance'=>'id|name','open_by'=>'is_show_difficulty']],
['type|select','配置类型|系统会根据不同类型解析配置值',[config('CONFIG_TYPE_LIST')]],
['uid|select','客服',[$test_data,'key1|key2']],
['username|text','客服名称',['tip'=>'客服名称用于显示']],
['extra|textarea','配置项|如果是枚举型 需要配置该项'],
['head_pic_id|cropper','头像',['pic_wh'=>'400*400'] ],
['head_pic_id2|images','头像2'],
['id|hidden'],
['birthday|date', '天'],
['birthday1|datetime', '时'],
['birthday2|dateyear', '年'],
['birthday3|datemonth', '月'],
['tags|tags', '标签',],
])
->addTabGroup('扩展信息')
->addWidgets([
['sort|number','排序|用于分组显示的顺序', ['tip'=>'测试:用于分组显示的顺序'] ],
['type2|checkbox','多选|多选测试',[config('CONFIG_TYPE_LIST')]],
['type3|radio','单选|单选测试',[config('yes_no')]],
['is_open|switch','配置类型|系统会根据不同类型解析配置值'],
['content|kindeditor', '内容'],
])
->setWidgetsValues( $info )
->fetch();
}
~~~
![](https://box.kancloud.cn/c7c3bb2e7807bf57fd0813688165215b_1664x798.png)
![](https://box.kancloud.cn/ea9dd23160c08643f4826c168c239f8e_1648x774.png)
修改布局:layout_panel
~~~
->layoutView('layout_panel')
~~~
![](https://box.kancloud.cn/2cec08e105f8a0ea37ed9eedd61aae72_1700x856.png)
![](https://box.kancloud.cn/b62bcc1ba213b6f8014e3be3511d8cd1_1683x862.png)
![](https://box.kancloud.cn/7ae187e3a6e108e396a08d1b18cdbd43_1694x891.png)
修改布局:layout_full
~~~
return TBuilder('form',$this) ->addTabGroup('基本信息')
->setFormAction( url('action') )
->addWidgets([
['name|val','配置标识|用于C/config函数调用,只能使用英文且不能重复'],
['name|text','配置标识|用于C/config函数调用,只能使用英文且不能重复',[
'validate'=>['required','minlength'=>'2']
]],
])
->addTabGroup('扩展信息')
->addWidgets([
['sort|number','排序|用于分组显示的顺序', ['tip'=>'测试:用于分组显示的顺序'] ],
['type2|checkbox','多选|多选测试',[config('CONFIG_TYPE_LIST')]],
])
->setWidgetsValues( $info )
->layoutView('layout_full')
->fetch();
~~~
![](https://box.kancloud.cn/86caa1187e7aa3de8dc55ce624c7499a_1671x516.png)
附加Tab后置内容:appendTabHtml
~~~
$html = <<<str
<div class="pull-right mr50 mt50">
<span class="mr20">合计: <span class="warn-price">168.00</span>元</span>
<button class="btn btn-primary">去支付</button>
</div>
str;
return TBuilder('form',$this) ->addTabGroup('资源包购买')
->setFormAction( url('action') )
->addWidgets([
['name|number','资源包数量'],
])
->layoutView('layout_panel')
->appendTabHtml($html)
->hideFormButton()
->fetch();
~~~
![](https://box.kancloud.cn/e4906645f2266b4eababd9b478cae345_1036x243.png)
> **说明:**
> addTabGroup用于创建tab分组,其后addWidgets创建tab页内的组件。两者组合使用依次调用。
> 当页面操作为编辑时setWidgetsValues传入编辑数据值数组
- 序言
- 环境搭建
- 下载及安装
- 构建器
- 构建器概述
- 模版构建器(TBuilder)
- Tab组件
- Topbar组件
- 按钮
- 顶部按钮配置
- 按钮配置明细
- 表格(table)
- Table案例
- 「方法」加载数据
- 「方法」设置数据列
- 「方法」列排序
- 「组件」检索过滤器
- 「组件」顶部按钮
- 「组件」列表按钮
- 「配置」列快速编辑
- 「配置」列附加内容
- 「配置」显隐列表复选框
- 「配置」自定义样式
- 表单(form)
- Form案例
- 「方法」添加组件(addWidgets)
- 「方法」数据检索过滤(filter)
- 「组件」富文本编辑器(kindeditor|editormd)
- 「组件」图片组件(images|cropper)
- 「组件」select listbox组件(listbox)
- 「组件」颜色选择器(button_color)
- 「组件」自定义内容
- 「配置」显隐字段关联(open_by)
- 「配置」form布局(layoutView)
- 「配置」隐藏描述区(hideWidgetsDesc)
- 「配置」数据验证(validate)
- 「配置」隐藏表单底部按钮(hideFormButton)
- 「配置」字段tip提示(tip)
- 自定义页面(custom)
- Custom案例
- 「组件」echart
- 「组件」Tile Widgets
- 「配置」custom布局
- 「配置」自定义html内容
- 「配置」自定义提醒页面
- 树形(tree)
- Tree案例
- 左侧菜单区配置
- 关闭左侧菜单(hideLeftMenu)
- 顶部按钮配置
- 自定义菜单配置
- 展现方式配置
- 表内增删改(Tabullet)
- 通用设置
- 依赖文件加载(插件/js/css)
- 指定布局/模版
- 内容定位栏(setTrayMenu)
- 设置内容区侧栏
- 模态框打开页面
- 组件构建器(TWidget)
- echarts
- table
- form组件
- Tabs组件
- builder构建
- titleLine
- 数据构建器(DBuilder)
- 概述(案例)
- 「方法」获取单条记录详情
- 「方法」获取分页列表数据
- 「方法」排序
- 「方法」设置查询字段
- 「方法」快速编辑
- 「方法」数据导出
- 「方法」联表查询
- 「方法」查询数据再处理
- 「配置」回调处理
- 「配置」设置过滤字段
- 「配置」指定过滤字段匹配值
- 「配置」增加编辑支持
- 「配置」查询出全部数据
- 辅助类
- Excle
- 模块开发
- 插件开发
- 扩展
- 行为扩展
- 行为日志
- 杂项
- 图片异步加载
- jquery插件zeroModal
- 提示
- form表单验证
- ajax相关
- 展开收起
- 常用函数
- 其他插件
- DEMO
- 增删改查
- 安全
- XSS 攻击
- 注入攻击
- CSRF 攻击
- 其他攻击和漏洞
- 开发
- TBuilder组件开发
- 更新日志
- 关于文档