表單布局 · DolphinPHP1.6.0完全開發手冊-基于ThinkPHP5.1.42LTS的快速開發框架

## layout(布局參數) | 版本 | 更新內容 | | --- | --- | | 1.3.0 | 支持指定不同分辨率下的寬度 | >[info]從公測版2017-01-20開始，表單構建器支持簡單的布局，如果需要復雜的布局方式，需要自己寫模板比如表單頁面如下： ~~~ // 顯示編輯頁面 return ZBuilder::make('form') ->addFormItems([ ['hidden', 'id'], ['select', 'pid', '所屬欄目', '必選', ColumnModel::getTreeList($id)], ['text', 'name', '欄目名稱', '必填'], ['radio', 'model', '內容模型', '必選', 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(); ~~~ 默認情況下是每一個表單項獨占一行 ![](https://box.kancloud.cn/7a1bd0e7de16adb1ae014ef0b43a564e_1509x735.png) 我們可以用layout來設置各個表單項所占的寬度，比如： ~~~ // 顯示編輯頁面 return ZBuilder::make('form') ->addFormItems([ ['hidden', 'id'], ['select', 'pid', '所屬欄目', '必選', ColumnModel::getTreeList($id)], ['text', 'name', '欄目名稱', '必填'], ['radio', 'model', '內容模型', '必選', 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(); ~~~ 那么最終界面如下; ![](https://box.kancloud.cn/deaa126fe9172efb44cc28bb9280a945_1510x613.png) layout方法接受一個數組，鍵是對應的表單項名，值為所占的寬度，和bootstrap的布局一致，一共可以設置1-12個單元格，具體的大家可以按自己的需求調整。 ### 添加表單項時設置布局參數 >[info] 從1.0.2開始，表單布局支持以下方式在添加表單項時，直接在表單項類型后面添加布局寬度，用英文冒號（:）隔開。 ~~~ // 顯示編輯頁面 return ZBuilder::make('form') ->addFormItems([ ['hidden', 'id'], ['select:6', 'pid', '所屬欄目', '必選', ColumnModel::getTreeList($id)], ['text:6', 'name', '欄目名稱', '必填'], ['radio:6', 'model', '內容模型', '必選', 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(); ~~~ ### 不同分辨率下設置不同的寬度 >[info] 從1.3.0開始支持 | 屏幕類型 | 值 | | --- | --- | | 超小屏幕手機 (<768px) | xs | | 小屏幕平板 (≥768px) | sm | | 中等屏幕桌面 (≥992px) | md | | 大屏幕桌面 (≥1200px) | lg | 格式： ~~~ ->layout(['字段名' => 'xs|sm|md|lg']) ~~~ 如： ~~~ ->layout(['pid' => '6|4|8|12']) ~~~ 或 ~~~ ->addFormItems([ ['select:6|4|8|12', 'pid', '所屬欄目'], ]) ~~~ 表示在大屏幕桌面占12格，中等屏幕桌面占8，小屏幕平板占4格，超小屏幕手機6。 ~~~ ->layout(['pid' => '6']) ~~~ 或 ~~~ ->addFormItems([ ['select:6', 'pid', '所屬欄目'], ]) ~~~ 表示所有分辨率下，都占6格。默認不填寫則以第一個參數為準。 ~~~ ->layout(['pid' => '6|||8']) ~~~ 或 ~~~ ->addFormItems([ ['select:6|||8', 'pid', '所屬欄目'], ]) ~~~ 表示超小屏幕手機、小屏幕平板、中等屏幕桌面占6格，大屏幕桌面占8格。