layout(布局参数)
从公测版2017-01-20开始,表单构建器支持简单的布局,如果需要复杂的布局方式,需要自己写模板
比如表单页面如下:
// 显示编辑页面
return ZBuilder::make("form")
->addFormItems([
["hidden", "id"],
["select", "pid", "所属栏目", "<span class="text-danger">必选</span>", ColumnModel::getTreeList($id)],
["text", "name", "栏目名称", "<span class="text-danger">必填</span>"],
["radio", "model", "内容模型", "<span class="text-danger">必选</span>", DocumentModel::getTitleList()],
["radio", "type", "栏目属性", "", ["最终列表栏目", "外部链接"], 0],
["text", "url", "链接", "可以填写完整的url,如:<code>http://www.dolphinphp.com</code>,也可以填写 <code>模块/控制器/操作</code>,如:<code>cms/index/index</code>"],
["radio", "target", "打开方式", "", ["_self" => "当前窗口", "_blank" => "新窗口"], "_self"],
["select", "list_template", "列表页模板", "可选,模板目录: <code>cms/view/column</code>", parse_array($template_list)],
["select", "detail_template", "详情页模板", "可选,模板目录: <code>cms/view/document</code>", parse_array($template_detail)],
["ckeditor", "content", "栏目内容", "可作为单页使用"],
["icon", "icon", "图标"],
["radio", "post_auth", "是否支持投稿", "是否允许前台用户投稿", ["禁止投稿", "允许投稿"]],
["radio", "hide", "是否隐藏栏目", "隐藏后前台不可见", ["显示", "隐藏"], 0],
["select", "rank_auth", "浏览权限", "", RoleModel::getTree(null, "开放浏览")],
["radio", "status", "立即启用", "", ["否", "是"]],
["text", "sort", "排序"],
])
->setFormData($info)
->fetch();
默认情况下是每一个表单项独占一行
我们可以用layout来设置各个表单项所占的宽度,比如:
// 显示编辑页面
return ZBuilder::make("form")
->addFormItems([
["hidden", "id"],
["select", "pid", "所属栏目", "<span class="text-danger">必选</span>", ColumnModel::getTreeList($id)],
["text", "name", "栏目名称", "<span class="text-danger">必填</span>"],
["radio", "model", "内容模型", "<span class="text-danger">必选</span>", DocumentModel::getTitleList()],
["radio", "type", "栏目属性", "", ["最终列表栏目", "外部链接"], 0],
["text", "url", "链接", "可以填写完整的url,如:<code>http://www.dolphinphp.com</code>,也可以填写 <code>模块/控制器/操作</code>,如:<code>cms/index/index</code>"],
["radio", "target", "打开方式", "", ["_self" => "当前窗口", "_blank" => "新窗口"], "_self"],
["select", "list_template", "列表页模板", "可选,模板目录: <code>cms/view/column</code>", parse_array($template_list)],
["select", "detail_template", "详情页模板", "可选,模板目录: <code>cms/view/document</code>", parse_array($template_detail)],
["ckeditor", "content", "栏目内容", "可作为单页使用"],
["icon", "icon", "图标"],
["radio", "post_auth", "是否支持投稿", "是否允许前台用户投稿", ["禁止投稿", "允许投稿"]],
["radio", "hide", "是否隐藏栏目", "隐藏后前台不可见", ["显示", "隐藏"], 0],
["select", "rank_auth", "浏览权限", "", RoleModel::getTree(null, "开放浏览")],
["radio", "status", "立即启用", "", ["否", "是"]],
["text", "sort", "排序"],
])
->setFormData($info)
->layout(["pid" => 6, "name" => 6, "model" => 6, "type" => 6])
->fetch();
那么最终界面如下;
layout方法接受一个数组,键是对应的表单项名,值为所占的宽度,和bootstrap的布局一致,一共可以设置1-12个单元格,具体的大家可以按自己的需求调整。
添加表单项时设置布局参数
从1.0.2开始,表单布局支持以下方式
在添加表单项时,直接在表单项类型后面添加布局宽度,用英文冒号(:)隔开。
// 显示编辑页面
return ZBuilder::make("form")
->addFormItems([
["hidden", "id"],
["select:6", "pid", "所属栏目", "<span class="text-danger">必选</span>", ColumnModel::getTreeList($id)],
["text:6", "name", "栏目名称", "<span class="text-danger">必填</span>"],
["radio:6", "model", "内容模型", "<span class="text-danger">必选</span>", DocumentModel::getTitleList()],
["radio:6", "type", "栏目属性", "", ["最终列表栏目", "外部链接"], 0],
["text", "url", "链接", "可以填写完整的url,如:<code>http://www.dolphinphp.com</code>,也可以填写 <code>模块/控制器/操作</code>,如:<code>cms/index/index</code>"],
["radio", "target", "打开方式", "", ["_self" => "当前窗口", "_blank" => "新窗口"], "_self"],
["select", "list_template", "列表页模板", "可选,模板目录: <code>cms/view/column</code>", parse_array($template_list)],
["select", "detail_template", "详情页模板", "可选,模板目录: <code>cms/view/document</code>", parse_array($template_detail)],
["ckeditor", "content", "栏目内容", "可作为单页使用"],
["icon", "icon", "图标"],
["radio", "post_auth", "是否支持投稿", "是否允许前台用户投稿", ["禁止投稿", "允许投稿"]],
["radio", "hide", "是否隐藏栏目", "隐藏后前台不可见", ["显示", "隐藏"], 0],
["select", "rank_auth", "浏览权限", "", RoleModel::getTree(null, "开放浏览")],
["radio", "status", "立即启用", "", ["否", "是"]],
["text", "sort", "排序"],
])
->setFormData($info)
->fetch();