除了靜態(tài)樣式外,MisShop還提供了類似Excel的條件格式金刁,方便的根據(jù)各種狀態(tài)帅涂,顯示不同的樣子议薪。
MisShop選中一個(gè)單元格后,右方會出現(xiàn) 基本屬性 高級屬性媳友,控件屬性斯议,控件動作 四組屬性。
第一列是列名醇锚,表示這個(gè)屬性做什么的哼御。
第二列是靜態(tài)值,表示填的是什么焊唬,屬性值就是什么恋昼,例如填寫1+3,那么表示這個(gè)屬性的值是字符串“1+3”求晶。
第三列是公式焰雕,表示用這個(gè)公式來計(jì)算屬性值,例如填寫的1+3芳杏,那么表示這個(gè)屬性的值是整數(shù)4.
下面我們用客戶列表為例矩屁,來說明一下條件樣式的用法。
1.條件前景色爵赵,背景色吝秕,寬度,高度等空幻。
*需求:客戶列表烁峭,如果一個(gè)客戶是非常重要,那么把 重要度 這一列的字體顏色顯示為紅色秕铛,否則是綠色约郁。
選中值為 =ds.重要度
的重要度格, 在右邊的 基本屬性(欄) -> 顯示(組) 中找到屬性 前景色但两,雙擊第三列公式列鬓梅,會彈出表達(dá)式輸入框。
ifv
是條件判斷函數(shù)谨湘, 第一個(gè)參數(shù)是判斷條件绽快,如果條件為真,那么返回第二個(gè)參數(shù)紧阔,否則返回第三個(gè)參數(shù)作為結(jié)果坊罢。
ds.重要度==Dict.重要度.非常重要
表示如果ds的重要度字段的值是字典項(xiàng)非常重要的時(shí)候,返回真(true)擅耽,否則返回假(false)活孩。
-3407872(紅色) 和 -16735232(綠色) 是用 rgba模型表示的顏色。一般顏色是在 函數(shù)編輯窗口 右邊秫筏,點(diǎn)擊 顏色輸入 后用各種顏色輸入器選擇得到的诱鞠。
常見條件格式:
顯示組:
- 前景色
- 背景色
- 控件背景色
- 寬度
- 高度
- 內(nèi)邊距(上挎挖, 下,左航夺,右)
字體組:
- 字體
- 字號
- 加粗
- 斜體
- 下劃線
2.條件樣式 (復(fù)雜樣式)
有的時(shí)候蕉朵,希望顯示的條件樣式不是簡單的顏色大小之類的,而是某種復(fù)雜效果阳掐。
例如我們可以在樣式配置里始衅,把刪除按鈕 設(shè)置位為 警告色的外邊框按鈕 ( btn-outline-warning)
。這個(gè)樣式除了前景色不同之外缭保,鼠標(biāo)懸浮在按鈕上的時(shí)候汛闸,背景色也會發(fā)生改變。
如果需要用條件控制復(fù)雜樣式艺骂,需要先了解復(fù)雜樣式對應(yīng)的網(wǎng)頁中的class值诸老。
可以先找個(gè)格子配置為這個(gè)樣式,然后鼠標(biāo)移動到設(shè)計(jì)器右上的 配置樣式 按鈕上看到钳恕。
如圖别伏,我們可以看到 這個(gè)格子具有圖標(biāo)樣式oi
oi-pencil
,以及按鈕樣式btn-secondary
btn-sm
忧额。
如果我們希望當(dāng)客戶為重要客戶的時(shí)候厘肮,刪除按鈕 顯示為這個(gè)樣式,不能簡單的用前景色睦番,背景色的條件表達(dá)式來控制类茂,而是要用公式來控制 控件樣式。
可以在 基本屬性 -> 顯示控制(組)-> 控件樣式 的公式中托嚣,輸入
ifv(ds.重要度==Dict.重要度.非常重要,"btn-outline-warning","btn-secondary")
這個(gè)函數(shù)表示巩检,當(dāng)重要度為非常重要的時(shí)候,按鈕的樣式為btn-outline-warning(警告色的外邊框按鈕),否則按鈕的樣式為 btn-secondary(次要顏色普通按鈕)
鼠標(biāo)移動到黃色的刪除按鈕上示启,會有底色變黃的效果碴巾。
復(fù)雜樣式中,在控件樣式生成的值丑搔,會被填寫到html頁面的控件對應(yīng)的元素的class屬性中。所以可以通過條件復(fù)雜樣式提揍,來實(shí)現(xiàn)各種特殊效果啤月,只要預(yù)先導(dǎo)入那些復(fù)雜樣式就可以。
復(fù)雜樣式可以控制的屬性包括:
- 控件樣式(控件的class屬性)
- 控件style(控件的style屬性)
- 控件自由屬性(生成的字符串 放到控件屬性里面劳跃,可以是任意字符串)
- 單元格樣式(對應(yīng)控件外層的div或者td的class屬性)
- 單元格style(控件的style屬性)
- 單元格自由屬性(生成的字符串 放到控件屬性里面谎仲,可以是任意字符串)
3.條件可視和條件可用
需求:隱藏非常重要的客戶的手機(jī)號。
找到手機(jī)號的格子 =ds.手機(jī)號
刨仑,在可視屬性的公式里郑诺,輸入 ds.重要度!=Dict.重要度.非常重要
夹姥,那么可以看到效果。
基本屬性 -> 可視 控制單元格是否可以被用戶看到辙诞。如果直接去掉勾辙售,那么這個(gè)格子的內(nèi)容將不會顯示。
如果需求變化為管理員之外的其他人無法看到非常重要的客戶的手機(jī)號飞涂,那么只需要把可視公式改為: me.角色.名稱=="admin" || ds.重要度!=Dict.重要度.非常重要
如果角色的名稱是admin 或者 不是非常重要旦部, 那么可以看到。
可用 和可視的用法類似较店∈堪耍控件屬性 ->可用 是用來控制是否可以編輯,或者鏈接是否可以點(diǎn)擊等情況的梁呈。
例如編輯按鈕婚度,可用 設(shè)置為否,或者公式返回為假false官卡,點(diǎn)擊的時(shí)候就會提示該鏈接不可用蝗茁。
例如編輯頁面里,可用 的靜態(tài)屬性為否味抖,那么這個(gè)屬性就無法編輯评甜;在可用屬性里填寫了公式,那么就只有當(dāng)公式返回真true的時(shí)候仔涩,才可以編輯忍坷。
4.行可視和列可視
除了隱藏格子之外,還可以徹底的隱藏某行或者某列
點(diǎn)擊面板左邊的行頭 1,2,3,4...可以選中頁面的行熔脂。
點(diǎn)擊面板上方的列頭 A佩研,B,C霞揉,D...可以選中頁面的列旬薯。
在區(qū)域的某個(gè)格子里,鼠標(biāo)右鍵菜單中點(diǎn)擊 選擇區(qū)域行 可以選中區(qū)域的行(或者直接按快捷鍵 Ctrl + 2 )适秩;點(diǎn)擊 選擇區(qū)域列 可以選中區(qū)域的列(快捷鍵Ctrl + 3)
可以看到面板右側(cè)的基本屬性欄里多了一些屬性绊序,這些就是行屬性/列屬性。
可以控制 列表頁面中表格中的某些行列不顯示秽荞,或者編輯頁面中某些行骤公,列不顯示。
5.條件圖標(biāo) 和 條件角標(biāo)扬跋。
條件圖標(biāo)和條件角標(biāo)的實(shí)現(xiàn)和條件復(fù)雜樣式的實(shí)現(xiàn)思路相同阶捆。都是用公式去控制 圖標(biāo)或者 角標(biāo)的 class。
需求: 如果客戶是男性,那么客戶名 使用 向上 的圖標(biāo)洒试,如果是女性倍奢,那么客戶名 使用 向下 的圖標(biāo)。 并且如果重要度是非常重要垒棋,名稱 的文字顯示為紅色卒煞。
實(shí)現(xiàn):
在 客戶名稱的格子 =ds.名稱
中,設(shè)置格子的 控件屬性 -> 圖標(biāo)樣式 的公式為:
ifv(ds.性別==Dict.性別.男,"fa fa-chevron-up ","fa fa-chevron-down ")
"fa fa-chevron-up "
是向上箭頭的圖標(biāo)樣式捕犬□伟樱可以在樣式配置,圖標(biāo)里配置看看碉碉。
"fa fa-chevron-down "
是向下箭頭的圖標(biāo)樣式柴钻。
把之前配置在 重要度 格子中的 前景色的公式ifv(ds.重要度==Dict.重要度.非常重要,-3407872,-16735232)
復(fù)制下來,粘貼到 名稱格 的 前景色公式中垢粮。
條件角標(biāo)也是類似
控制圖標(biāo)贴届,角標(biāo)的顏色,內(nèi)邊距蜡吧,位置等也是類似控制毫蚓。