條件樣式-單元格屬性

除了靜態(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á)式輸入框。

前景色的表達(dá)式編輯.png

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.重要度.非常重要夹姥,那么可以看到效果。

非常重要的客戶的手機(jī)號不顯示.png

基本屬性 -> 可視 控制單元格是否可以被用戶看到辙诞。如果直接去掉勾辙售,那么這個(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)

選中頁面行列或者區(qū)域行列

可以看到面板右側(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)贴届,角標(biāo)的顏色,內(nèi)邊距蜡吧,位置等也是類似控制毫蚓。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市昔善,隨后出現(xiàn)的幾起案子元潘,更是在濱河造成了極大的恐慌,老刑警劉巖君仆,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件翩概,死亡現(xiàn)場離奇詭異,居然都是意外死亡返咱,警方通過查閱死者的電腦和手機(jī)钥庇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來咖摹,“玉大人评姨,你說我怎么就攤上這事∮┣纾” “怎么了裤唠?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵赞弥,是天一觀的道長衅枫。 經(jīng)常有香客問我呵哨,道長,這世上最難降的妖魔是什么两入? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮敲才,結(jié)果婚禮上裹纳,老公的妹妹穿的比我還像新娘择葡。我一直安慰自己,他們只是感情好剃氧,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布敏储。 她就那樣靜靜地躺著,像睡著了一般朋鞍。 火紅的嫁衣襯著肌膚如雪已添。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天滥酥,我揣著相機(jī)與錄音更舞,去河邊找鬼。 笑死坎吻,一個(gè)胖子當(dāng)著我的面吹牛缆蝉,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播瘦真,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼刊头,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了诸尽?” 一聲冷哼從身側(cè)響起原杂,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎您机,沒想到半個(gè)月后穿肄,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡往产,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年被碗,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片仿村。...
    茶點(diǎn)故事閱讀 38,650評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡锐朴,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蔼囊,到底是詐尸還是另有隱情焚志,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布畏鼓,位于F島的核電站酱酬,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏云矫。R本人自食惡果不足惜膳沽,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧挑社,春花似錦陨界、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至阱当,卻和暖如春俏扩,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背弊添。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工录淡, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人表箭。 一個(gè)月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓赁咙,卻偏偏與公主長得像,于是被迫代替她去往敵國和親免钻。 傳聞我的和親對象是個(gè)殘疾皇子彼水,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內(nèi)容