牛骨文教育服务平台(让学习变的简单)

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