表單項 · NPadmin全程視頻（ThinkPHP6項目實戰）+二開文檔

[TOC] ## 內置表單項 >` text`：單行文本框 > `password`：密碼輸入框 > `radio`：單選 >` checkbox`：多選 > `switch`：開關 > `select`：下拉選擇 > `textara`：多行文本框 > `number`：h5-number 數字數字框 > `date`：日期選擇 > `datetime`：日期時間選擇 > `time`：時間選擇 > `month`：年月選擇 > `year`：年份選擇 > `hidden`：隱藏域 > `color`：取色器 > `slider`：滑塊 > `transfer`：穿梭框 > `rate`：評分 > `image`：單圖上傳 > `file`：單文件上傳 > `multiple_image`：多圖上傳 > `multiple_file`：多文件上傳 > `array`：數組 > `keyvalue`：鍵值對 > `tinymce` 富文本編輯器 > `xmselect`· 下拉多（單）選 > `tag` 標簽 > `h5color`：h5-color 取色器 > `h5tel`：h5-tel > `h5url`：h5-url > `h5email`：h5-email ## 表單項通用屬性 **屬性選項**是指比如添加表單項等操作時可以設置的更多屬性選項。 ~~~ $form->addFormItem('字段名', 'text', [ 'label' => '標題', // 可以根據需求設置更多屬性選項 ... ]); ~~~ ~~~ $form['字段名'] = [ 'elem' => 'text', // 指定表單類型必須 'label' => '標題', // 可以根據需求設置更多通用屬性選項 ... ]; ~~~ `field`：string，字段名無需單獨設置 `elem`：string，表單類型，填寫`內置表單項`中或自定義的表單項對應的類型名稱 `label`：string，表單人類可識名稱 `attrs`：array，注入到表單標簽上的標簽屬性，比如class、data-xx實現一些自定義的數據傳遞（后文你會發現大量在attrs來賦予表單更多的能力） <span style="color:green">常用</span> `options`：array，用于一些選項型表單項進行選項傳遞（如：radio/checkbox/select...） `tip`：string，提示，默認無 `before`：function，解析前置回調，默認無 `after`：function，解析后綴回調，默認無 `fetch`：string，自定義表單項模板，一般不設置 `html`：string，自定義表單項html結構，一般不設置 ## 項單項特殊用法 **下面的文檔只是針對有可以通過屬性的改變來控制表單項一些功能的進行說明，如果表單項沒有特殊控制就不單獨講該表單項怎么使用了。** ### `text` 單行文本框 ~~~ $form->addFormItem('字段名', 'text', [ 'label' => '單行帶選擇', 'options' => [ '張三' => '張三', '李四' => '李四', '王五' => '王五', // 也支持分組 //'人物' => [ // '張三' => '張三', // '李四' => '李四', // '王五' => '王五' //], //'動物' => [ // '旺財' => '旺財', // '加菲貓' => '加菲貓', // '熊大' => '熊大' //] ] ]); ~~~ 可以給`text`類型表單加`options`選項實現一些常用的輸入內容以下拉的形式默認出來進行快捷輸入。 ~~~ $form->addFormItem('字段名', 'text', [ 'label' => '字段名稱', 'attrs' => [ 'class' => 'myclass', 'placeholder' => '請輸入XXX', 'lay-verify' => 'required', 'readonly' => true // ... ] ]); // 最終生成的input html標簽結構： // <input type="text" class="myclass layui-input form-item form-item-text form-item-field-字段名" placeholder="請輸入XXX" lay-verify="required" readonly="1" name="字段名" id="id_字段名"> // 每個表單項的輸入框（或主input標簽）都有的類名，方便進行DOM查找和操作： // form-item // form-item-表單類型 // form-item-field-字段名 ~~~ 可以給`attrs`設置表單標簽屬性，比如class名等。來實現一些標簽屬性本身的功能和<span style="color:blue;">**傳值**</span>，其他表單項都有`attrs`來設置html標簽屬性，后文的其他表單項非特殊業務就不單獨說明了。 ### `radio` 單選框 ~~~ $form->addFormItem('c', 'radio', [ 'label' => '性別', //'is_title' => false, 'options' => [ 'nan' => '男', 'nv' => '女', 'wz' => '未知' ] ]); ~~~ 通過`options`傳遞選項列表，value => label ### `checkbox` 多選框 ~~~ $form->addFormItem('d', 'checkbox', [ 'label' => '愛好', 'options' => [ 'lq' => '籃球', 'zq' => '足球', 'pq' => '排球' ], 'attrs' => [ 'value' => ["lq","zq"] ] ]); ~~~ 通過`options`傳遞選項列表，value => label ### `select` 下拉選擇 ~~~ $form->addFormItem('e', 'select', [ 'label' => '年齡', 'tip '=> '請選擇年齡', 'options' => [ '16' => '16歲', '17' => '17歲', '18' => '18歲' ], 'attrs' => [ 'value' => '18' ] ]); $form['f'] = [ 'elem' => 'select', 'label' => '風格', 'options' => [ '純文風格' => [ '1' => '簡約', '2' => '標題+簡介' ], '圖文風格' => [ '3' => '圖文1', '4' => '圖文2' ] ] ]; ~~~ 通過`options`傳遞選項列表，支持二維進行選項分組。 ### `date`、`datetime`、`time`、`year`、`month`日期、日期時間、時間、年、月選擇 ~~~ $form->addFormItem('字段名', 'date', [ 'label' => '日期時間', ]); $form->addFormItem('字段名', 'datetime', [ 'label' => '日期時間時間', ]); $form->addFormItem('字段名', 'time', [ 'label' => '時間選擇', ]); $form->addFormItem('字段名', 'month', [ 'label' => '年月選擇', ]); $form->addFormItem('字段名', 'year', [ 'label' => '年份選擇', ]); ~~~ layui日期文檔地址：https://www.layuion.com/doc/modules/laydate.html `date`：日期選擇默認格式 `yyyy-MM-dd` 如 `2022-04-08` `datetime`：日期時間選擇默認格式 `yyyy-MM-dd HH:mm:ss` 如 `2022-04-08 11:31:09` `time`：時間選擇默認格式`HH:mm:ss` 如`11:31:09` `year`：年份選擇默認格式`yyyy` 如 `2022` `month`：年月選擇默認格式`yyyy-MM` 如 `2022-04` 可以通過`attrs`設置更多標簽屬性來實現更多需求功能： ~~~ $form->addFormItem('date', 'date', [ 'label' => '日期', 'attrs' => [ 'data-range' => '|', // 是否開啟范圍選擇 true 默認是 ~ 用為2個日期段分隔符也可以設定自定義分隔符 | ] ]); ~~~ ``` 'data-range' => '|', // 是否開啟范圍選擇 true 默認是 ~ 用為2個日期段分隔符也可以設定自定義分隔符 | 'data-format' => 'yyyy年MM月dd日' // 自定義格式一般不需要默認格式見上文 'data-close-preview' => true // 是否關閉預覽默認開啟 'data-min' => '2022-03-01' // 設置可選最小值值你自己看到辦可以寫死也可以函數自動獲取 'data-max' => date('Y-m-d') // 設置可選最大值 'data-hide-bottom' => true // 關閉底部區域默認開啟 'data-btns' => 'clear' // 自定義底部按鈕 clear、now、confirm 多個,逗號分割 'data-theme' => 'molv' // 主題 'data-calendar' => true // 是否顯示公歷默認不顯示 'data-mark' => json_encode(['2022-04-01' => '測試', '2022-04-02' => '牛皮']) // 標注重要日子 'data-trigger' => 'click' // 觸發事件名默認 focus 'data-zindex' => 99 // zIndex 層級默認 66666666 ``` ### `color` 取色器可以通過`attrs`設置更多標簽屬性來實現更多需求功能： ``` 'type' => 'hidden' // 不顯示文本輸入框 'data-format' => 'rgb', // 取值方式 rgb hex 默認hex 'data-alpha' => true, // 是否開啟透明度默認false沒有開啟 'data-predefine' => false,// 關閉預定義顏色默認開啟 ``` ### `slider` 滑塊可以通過`attrs`設置更多標簽屬性來實現更多需求功能： ``` 'data-type' => 'vertical', // 滑塊類型 default（水平滑塊）、vertical（垂直滑塊）默認 default 水平 'data-min' => 1 // 滑動條最小值，正整數，默認為 0 'data-max' => 100 // 滑動條最大值，正整數，默認為 100 'data-step' => 1 // 拖動的步長，正整數，默認為 1 'data-range' => false // 是否開啟滑塊的范圍拖拽，若設為 true，則滑塊將出現兩個可拖拽的環默認false 'data-showstep' => false // 是否顯示間斷點默認 false 'data-tips' => false // 是否顯示文字提示默認 false 'data-input' => false // 是否顯示輸入框（注意：若 range 參數為 true 則強制無效）默認 false 'data-height' => 200 // 滑動條高度，需配合 type:"vertical" 參數使用默認 200 'data-disabled' => true // 是否將滑塊禁用拖拽默認 false 'data-theme' => '#009688' // 主題顏色默認 '#009688' ``` ### `transfer` 穿梭框 ~~~ $form->addFormItem('transfer', 'transfer', [ 'label' => '穿梭框', 'attrs' => [ // 'data-width' => 150, //自定義寬度默認190， // 'data-height' => 300,//自定義高度默認 300 // 'data-title' => '數據源,已選中' // 自定義2邊標題 // 'data-search' => false, // 關閉搜索默認開啟 ], 'options' => [ ['value' => '1','title' => '張三'], ['value' => '2','title' => '李四'], ['value' => '3','title' => '王五'], ['value' => '4','title' => '趙六'], ['value' => '5','title' => '老師'] ] ]); ~~~ 通過`options`傳遞選項列表，看清楚格式。可以通過`attrs`設置更多標簽屬性來實現更多需求功能： ``` 'data-width' => 150, //自定義寬度默認190， 'data-height' => 300,//自定義高度默認 300 'data-title' => '數據源,已選中' // 自定義2邊標題 'data-search' => false, // 關閉搜索默認開啟 ``` ### `rate` 評分可以通過`attrs`設置更多標簽屬性來實現更多需求功能： ``` 'data-length' => 10, //設定星星的數量默認5個 'data-half' => true, //是否允許點半個星星默認false 'data-text' => true, //是否提示星星現在個數的文本默認false 'data-theme' => '#FFB800' //星星選中以后的顏色默認#FFB800 'data-readonly' => true //是否自讀默認false ``` ### `image`、`multiple_image`、`file`、`multiple_file`單圖、多圖、單文件、多文件上傳 ~~~ $form->addFormItem('image', 'image', [ 'label' => '單圖', 'attrs' => [ //'data-url' => '' // 自定義上傳接口默認 upload/upload 'data-data' => ['a' => '測試'], // 每次上傳請求的額外數據 'data-auto' => false, // 是否自動上傳默認true ] ]); ~~~ 可以通過`attrs`設置更多標簽屬性來實現更多需求功能： ~~~ 'data-url' => '' // 特殊情況用來自定義上傳接口地址默認 upload/upload 'data-data' => ['a' => '測試'], // 每次上傳請求的額外數據 'data-auto' => false, // 是否自動上傳選擇完文件就馬上自動生成默認true；如果為false 就會多一個上傳按鈕，你需要點擊上傳 'data-exts' => 'jpg|png|gifp|bmp|jpeg|web', //允許上傳的后綴名，多個|豎線分隔 // 圖片默認：jpg|png|gifp|bmp|jpeg|web 后期會改為后臺系統設置中修改 // 文件默認：doc|docx|xls|xlsx|ppt|pptx|pdf|wps|txt|rar|zip|jpg|png|gif|jpeg|webp|mp4 后期會改為后臺系統設置中修改 'data-drag' => false // 是否允許拖拽上傳默認true 'data-number' => 5 // 多圖、多文件時允許一次最多上傳的數量默認 5 'data-size' => 2048 // 單文件最大容量單位KB 默認2048 以后改為可后臺設置當然你設置了會把默認的覆蓋掉 ~~~ ### `xmselect` 下拉單多選 ~~~ $form->addFormItem('xmselect', 'xmselect', [ 'label' => '更多下拉', 'options' => [ '16' => '16歲', '17' => '17歲', '18' => '18歲', '19' => '19歲', '20' => '20歲', '21' => '21歲', '22' => '22歲', '23' => '23歲' ], 'attrs' => [ 'value' => '18', 'xm-select-max' => 3,// 最多選擇3個 //'xm-select-radio' => true, // 下拉單選 ] ]); ~~~ 通過`options`傳遞選項列表，value => label 可以通過`attrs`設置更多標簽屬性來實現更多需求功能： ``` 'xm-select-max' => 3,// 多選時最多選擇多少個 'xm-select-radio' => true, // 是否單選默認多選 ```