低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

表單是低代碼最基礎(chǔ)的數(shù)據(jù)輸入的方式,其中文本框是配置化表單的最基礎(chǔ)的業(yè)務(wù)能力組件之一,主要用于收集和展示用戶錄入的文本類的信息,例如名稱、地址、描述說(shuō)明等等。

那么我們接下來(lái)分幾個(gè)方面分別對(duì)文本框的使用進(jìn)行講解。

基礎(chǔ)功能

擁有內(nèi)容錄入、字?jǐn)?shù)統(tǒng)計(jì)、一鍵清除、密碼框、默認(rèn)提示、格式校驗(yàn)等功能。

字?jǐn)?shù)統(tǒng)計(jì)長(zhǎng)度限制

如圖所示,可以設(shè)置文本錄入最大長(zhǎng)度,與當(dāng)前錄入的數(shù)量展示,超過(guò)最大長(zhǎng)度后將無(wú)法錄入多余內(nèi)容,同時(shí)可以開啟字?jǐn)?shù)統(tǒng)計(jì)按鈕,這樣會(huì)更加清晰已經(jīng)占用的字?jǐn)?shù)統(tǒng)計(jì)

低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

一鍵清除

一鍵清除功能是指在內(nèi)容錄入后,可以通過(guò)清除按鈕刪除本文本框內(nèi)的所有內(nèi)容,用于在內(nèi)容錄入錯(cuò)誤時(shí)快速清空內(nèi)容,效果圖如下:

低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

配置如下:

低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

提示內(nèi)容

內(nèi)容提示用于在錄入內(nèi)容之前,告知用戶本文本框需要了解的提示,一旦輸入內(nèi)容后自動(dòng)清除提示

低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

也可以在組件之后提供獨(dú)立的內(nèi)容提示,提示通過(guò)懸浮的提示氣泡展示

低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

設(shè)置方式如下圖所示:

低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

密碼框

文本框可以作為密碼輸入框,當(dāng)作為密碼框時(shí),系統(tǒng)會(huì)增加脫密展示(不展示原文),也可以通過(guò)“原文”按鈕轉(zhuǎn)化為明文展示

低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

配置方式如下圖所示:

低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

前置與后綴

在提示用戶輸入信息時(shí),前綴與后綴常常作為規(guī)范、標(biāo)準(zhǔn)的輔助信息進(jìn)行展示,配置如下圖所示:

低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

必填校驗(yàn)

必填校驗(yàn)是表單中最基礎(chǔ)的數(shù)據(jù)校驗(yàn)方式,保障數(shù)據(jù)提交到服務(wù)端后數(shù)據(jù)的規(guī)范性與一致性,設(shè)置如下圖所示

低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

跨表查詢回填(查詢對(duì)話框)

文本組件可設(shè)置選擇關(guān)聯(lián)其他數(shù)據(jù)模型,配置為選擇類型。通過(guò)查詢對(duì)話框把其他模型中的數(shù)據(jù)回填到本文本框中,我們先看看效果如下圖所示:

低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

配置的方式如下圖所示:

低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

①:點(diǎn)擊需要配置查詢對(duì)話框的文本框組件

②:開啟支持搜索返回功能,開啟后實(shí)現(xiàn)通過(guò)跨模型的數(shù)據(jù)查詢并把對(duì)應(yīng)字段作為查詢內(nèi)容回填到文本框中

③:設(shè)置關(guān)聯(lián)模型,選擇對(duì)應(yīng)模型后(跨表查詢數(shù)據(jù)的來(lái)源)

④:跳過(guò)權(quán)限設(shè)置,對(duì)與數(shù)據(jù)來(lái)源的模型查詢時(shí)是否校驗(yàn)用戶的數(shù)據(jù)權(quán)限,打開時(shí)則不校驗(yàn)用戶的數(shù)據(jù)權(quán)限

⑤:展示值是選擇把對(duì)應(yīng)模型的哪個(gè)字段內(nèi)容回填到文本框中

⑥:是否可以多選回填,開啟多選回填后,將回填多條數(shù)據(jù)

⑦:展示字段用于查詢對(duì)話框中展示哪些字段以供 用戶去識(shí)別選擇

⑧:查詢對(duì)話框中的查詢條件設(shè)置

⑨:是否對(duì)返回的數(shù)據(jù)做條件過(guò)濾配置,開啟后可以進(jìn)行條件過(guò)濾配置

注意:文本組件開啟搜索后回填值為所選字段的值,此處與下拉選項(xiàng)不同,下拉框做數(shù)據(jù)回顯的時(shí)候僅僅是類似于系統(tǒng)字典的方式,該字段存了對(duì)應(yīng)數(shù)據(jù)的ID值,查詢對(duì)話框是存的數(shù)據(jù)本身的內(nèi)容

數(shù)據(jù)聯(lián)動(dòng)(數(shù)據(jù)自動(dòng)回顯)

數(shù)據(jù)聯(lián)動(dòng)和查詢對(duì)話框不同,查詢對(duì)話框是在對(duì)象文本框的主動(dòng)人為操作回填數(shù)據(jù),數(shù)據(jù)聯(lián)動(dòng)是對(duì)象文本框依賴于其他組件被動(dòng)回顯數(shù)據(jù),下面我們先看看實(shí)際的效果:

低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

配置方式如下,有配置權(quán)限的用戶進(jìn)入表單設(shè)計(jì)界面

低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

選中需要?jiǎng)討B(tài)回顯數(shù)據(jù)的字段操作如下圖所示:

低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

①:拖入文本框組件、綁定對(duì)應(yīng)字段的數(shù)據(jù)模型

②:設(shè)置文本框?yàn)橹蛔x模式

③:設(shè)置文本框的數(shù)據(jù)聯(lián)動(dòng)狀態(tài),點(diǎn)擊編輯,進(jìn)入數(shù)據(jù)聯(lián)動(dòng)界面,如下圖所示:

低代碼表單組件中的八大文本框組成和用途,超詳細(xì)講解(html表單文本框代碼)

①:選擇回填數(shù)據(jù)的來(lái)源模型(跨表數(shù)據(jù))

②:選擇本文本框依賴的組件內(nèi)容

③:設(shè)置數(shù)據(jù)回填數(shù)據(jù)模型的字段中與依賴組件值相同的數(shù)據(jù)行(用于把想要的目標(biāo)數(shù)據(jù)過(guò)濾出來(lái))

④:可設(shè)置多個(gè)條件

⑤:設(shè)置回填到本文本框的字段

在線demo:https://frame.bctools.cn/

基礎(chǔ)框架開源地址:https://gitee.com/software-minister/jvs

相關(guān)新聞

聯(lián)系我們
聯(lián)系我們
公眾號(hào)
公眾號(hào)
在線咨詢
分享本頁(yè)
返回頂部