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();